I found this npm package docx that helps to generate word document files with javascript:

I want to add an image to my doc but I can't seem to figure out how, or what's happening. I have spent quite a few hours on this, but the documentation isn't as prehensive enough for a noob like me.

Here is what I tried:

Attempt #1:

import React, { useState } from "react";
import * as fs from "fs";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = Media.addImage(doc, fs.readFileSync("myImage.png"), 200, 200); // ERROR HERE: "fs.readFileSync is not a function
    doc.addSection({children: [new Paragraph(logo)]});
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Output #1: TypeError: fs__WEBPACK_IMPORTED_MODULE_2__.readFileSync is not a function

Attempt #2:

import React, { useState } from "react";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = doc.createImage("myImage.png"); // ERROR HERE: doc.createImage is not a function
    doc.addSection({children: [new Paragraph(logo)]});
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Output #2: TypeError: doc.createImage is not a function

What is working:

import React, { useState } from "react";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = Media.addImage(doc); // returns a blank image in the word document since I didn't specify a file.
    doc.addSection({
        children: [new Paragraph(logo)]
    });
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Here are the documentations:
-
-
-

Any help is GREATLY appreciated!!

Thanks in advance!!

Edit:

Attempt #3:

import React, { useState } from "react";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = Media.addImage(doc, '../myImage.png'); // ERROR: InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    doc.addSection({
        children: [new Paragraph(logo)]
    });
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Output #3: InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

I found this npm package docx that helps to generate word document files with javascript: https://github./dolanmiu/docx

I want to add an image to my doc but I can't seem to figure out how, or what's happening. I have spent quite a few hours on this, but the documentation isn't as prehensive enough for a noob like me.

Here is what I tried:

Attempt #1:

import React, { useState } from "react";
import * as fs from "fs";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = Media.addImage(doc, fs.readFileSync("myImage.png"), 200, 200); // ERROR HERE: "fs.readFileSync is not a function
    doc.addSection({children: [new Paragraph(logo)]});
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Output #1: TypeError: fs__WEBPACK_IMPORTED_MODULE_2__.readFileSync is not a function

Attempt #2:

import React, { useState } from "react";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = doc.createImage("myImage.png"); // ERROR HERE: doc.createImage is not a function
    doc.addSection({children: [new Paragraph(logo)]});
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Output #2: TypeError: doc.createImage is not a function

What is working:

import React, { useState } from "react";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = Media.addImage(doc); // returns a blank image in the word document since I didn't specify a file.
    doc.addSection({
        children: [new Paragraph(logo)]
    });
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Here are the documentations:
- https://docx.js/#/usage/images
- https://runkit./dolanmiu/docx-demo5
- https://github./dolanmiu/docx/wiki/Images

Any help is GREATLY appreciated!!

Thanks in advance!!

Edit:

Attempt #3:

import React, { useState } from "react";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = Media.addImage(doc, '../myImage.png'); // ERROR: InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    doc.addSection({
        children: [new Paragraph(logo)]
    });
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Output #3: InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

• javascript
• node.js
• reactjs
• docx

2 Answers 2

DOCX author here,

Here is an example of docx with images in React (base64 and with URL request from the internet):

https://stackblitz./edit/react-ts-qdqu7z

One way is by loading the file by import, converting to blob, and use ImageRun.

import LetterHead from '../images/letterhead.jpg';
...

const export = async () => {
  const letterHead = await fetch(LetterHead);
  
  const doc = new Document({
     sections: [
        ...
        new ImageRun ({
          data : await letterHead.blob()
        ...
        
  ...
  
  Packer.toBlob(doc)...
}