React ImageRun Typescript Error: Type 'Blob' is not assignable to type 'string | Buffer | Uint8Array | ArrayBuffer'

Hi everyone,

I’m trying to follow the generate URL code from this example to add an image within a header.

However, I get the following error message:

Type 'Blob' is not assignable to type 'string | Buffer | Uint8Array | ArrayBuffer'.
  Type 'Blob' is missing the following properties from type 'ArrayBuffer': byteLength, [Symbol.toStringTag]  TS2322

    25 |               children: [
    26 |                 new ImageRun({
  > 27 |                   data: blob,
       |                   ^
    28 |                   transformation: {
    29 |                     width: 100,
    30 |                     height: 100

Here is the full code:

import "./App.css";
import { saveAs } from "file-saver";
import {Document, Footer, Header, ImageRun, Packer, PageBreak, Paragraph, TextRun} from "docx";

export default function App() {
  const generate = async () => {

    const blob = await fetch(
      "https://raw.githubusercontent.com/dolanmiu/docx/master/demo/images/cat.jpg"
    ).then(r => {
        return r.blob();
    });

    const doc = new Document({
      sections: [
        {
          properties: {
            titlePage: true // allows for first and default header text
          },
          headers: {
            default: new Header({
              children: [
                new ImageRun({
                  data: blob, // Type 'Blob' error here
                  transformation: {
                    width: 100,
                    height: 100
                  }
                }),
                new Paragraph({
                  text: "Default - Some more header text"
                })
              ]
            }),
            first: new Header({
              children: [
                new Paragraph({
                  text: "First header text"
                }),
                new Paragraph({
                  text: "First - Some more header text"
                })
              ]
            })
          },
          footers: {
            default: new Footer({
              children: [
                new Paragraph({
                  text: "Default Footer text"
                })
              ]
            }),
            first: new Footer({
              children: [
                new Paragraph({
                  text: "First Cool Footer text"
                })
              ]
            })
          },
          children: [
            new Paragraph({
              children: [new TextRun("Hello World 1"), new PageBreak()]
            }),
            new Paragraph({
              children: [new TextRun("Hello World 2"), new PageBreak()]
            }),
            new Paragraph({
              children: [new TextRun("Hello World 3"), new PageBreak()]
            }),
            new Paragraph({
              children: [new TextRun("Hello World 4"), new PageBreak()]
            }),
            new Paragraph({
              children: [new TextRun("Hello World 5"), new PageBreak()]
            })
          ]
        }
      ]
    });

    Packer.toBlob(doc).then((blob) => {
      console.log(blob);
      saveAs(blob, "example.docx");
      console.log("Document created successfully");
    });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>
        Start editing to see some magic happen :)
        <button onClick={generate}>Generate Report with docx!</button>
      </p>
    </div>
  );
}

I get that the error is telling me that Type “Blob” isn’t an assignable type, but why is it working in the example?

[anti-the-social]

Hi!

I assume you like to pass buffer into ImageRun, not a blob. So some conversion is needed. https://stackoverflow.com/questions/11821096/what-is-the-difference-between-an-arraybuffer-and-a-blob

I can be wrong, but data: Buffer.from() works for me

Please close an issue if this solved your issue.

[dolanmiu]

Closing as it’s more of a Q&A