如何将带有npm'docx'包的图像添加到Word文档中？

Question

我找到了此npm软件包docx，该软件包有助于使用javascript生成Word文档文件：https://github.com/dolanmiu/docx

我想在doc中添加图片，但似乎无法弄清楚如何或正在发生什么。我已经花了好几个小时在上面，但是对于像我这样的菜鸟来说，文档还不够全面。

这是我尝试过的：

尝试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;

输出＃1：TypeError：fs__WEBPACK_IMPORTED_MODULE_2 __。readFileSync不是函数

尝试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;

输出＃2：TypeError：doc.createImage不是函数

正在做什么：

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;

以下是文档：-https://docx.js.org/#/usage/images-https://runkit.com/dolanmiu/docx-demo5-https://github.com/dolanmiu/docx/wiki/Images

非常感谢任何帮助！！

提前感谢！

编辑：

尝试＃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;

输出＃3：InvalidCharacterError：无法在'Window'上执行'atob'：要解码的字符串未正确编码。

Answer 1

你能解决这个问题吗，兄弟？