![](/img/trans.png)
[英]How to add images to a Word document from angular using docx?
[英]How to add images with npm 'docx' package to word document?
我发现这个 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':要解码的字符串未正确编码。
DOCX作者在这里,
这是一个 docx 的示例,在 React 中带有图像(base64 和来自互联网的 URL 请求):
一种方法是通过导入加载文件,转换为 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)... }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.