Need Help with ImageRun in Angular

[dyrector]

I have an Angular project, and I need to be able to insert images from URLs, and I cannot make that happen.

I request a specific Angular example like the React example (https://stackblitz.com/edit/react-docx-images). I've inherited by attrition this project, and my Angular/JS/TS skills are sadly lacking.

I was able to use the code from the React example to get the base64 image into the Word doc. The React code works as written in the example for me:

data: Uint8Array.from(atob(imageBase64Data), c =>
  c.charCodeAt(0)
),

However, I cannot get this React code to work in Angular:

const blob = await fetch(
  "../relative/path/to/image.png"
).then(r => r.blob());
...
    data: blob,
...

I get the red squiggly under data and I'm informed:

"Type 'Blob' is not assignable to type 'string | Buffer | Uint8Array | ArrayBuffer'.
Type 'Blob' is missing the following properties from type 'ArrayBuffer': byteLength, [Symbol.toStringTag] ts(2322)
image-run.d.ts(7, 14): The expected type come from the property 'data' which is declared here on type 'IImageOptions'

TIA for any help.

[Kiber-pank]

У меня есть угловой проект, и мне нужно иметь возможность вставлять изображения из URL-адресов, и я не могу этого сделать.

Я прошу конкретный пример Angular, такой как пример React (https://stackblitz.com/edit/react-docx-images). Я унаследовал этот проект от истощения, и мои навыки Angular / JS / TS, к сожалению, отсутствуют.

Я смог использовать код из примера React, чтобы получить изображение base64 в Word doc. Код React работает так, как написано в примере для меня:

data: Uint8Array.from(atob(imageBase64Data), c =>
  c.charCodeAt(0)
),

Однако я не могу заставить этот код React работать в Angular:

const blob = await fetch(
  "../relative/path/to/image.png"
).then(r => r.blob());
...
    data: blob,
...

Я получаю красную закорючку под data и мне сообщили:

"Тип 'Blob' не присваивается типу 'string | Buffer | Uint8Array | ArrayBuffer'. Тип 'Blob' отсутствует следующие свойства из типа 'ArrayBuffer': byteLength, [Symbol.toStringTag] ts(2322) image-run.d.ts (7, 14):ожидаемый тип исходит из свойства "data", которое объявлено здесь в типе "IImageOptions"

TIA за любую помощь.

I have the same problem. Would you like to share the solution?

[dyrector]

Care to share? I still haven't figured it out.

[Kiber-pank]

Хотите поделиться? Я до сих пор этого не понял.

transferring the image to the server and uploading

[Kiber-pank]

    const blob_signature = await fetch(
        "/image/signature"        // => my server
    ).then(r => r.blob());

    const image_signature = new docx.ImageRun({
        data: blob_signature,
        transformation: {
            width: 100,
            height: 50,
        },
        floating: {
            horizontalPosition: {
                //relative: docx.HorizontalPositionRelativeFrom.RIGHT_MARGIN,
                offset: 4200000,
            },
            verticalPosition: {
                relative: docx.VerticalPositionRelativeFrom.PARAGRAPH,
                offset: 20,
            },
        },
    });

[Kiber-pank]

Хотите поделиться? Я до сих пор не разобрался.

after that, I insert the image_signature into the document

[dyrector]

I look forward to trying it out. Thanks!