如何將帶有 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：類型錯誤：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：類型錯誤：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

DOCX作者在這里，

這是一個 docx 的示例，在 React 中帶有圖像（base64 和來自互聯網的 URL 請求）：

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

Answer 2

一種方法是通過導入加載文件，轉換為 blob，然后使用 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)... }