如何解决在Angular 7的docx库中显示图片
我正在使用Angular 7 我正在以docx格式导出文件。我在显示文件中的图像时遇到问题。
这是我正在引用的代码。而不是下面的代码中的“ fs”,我使用的是文件保存器,因为Angular不支持fs
import * as fs from "fs";
import { Document,Media,Packer,Paragraph,TextWrappingSide,TextWrappingType } from 'docx';
const doc = new Document();
const image = Media.addImage(doc,fs.readFileSync("./demo/images/pizza.gif"),200,200);
doc.addSection({
children: [
new Paragraph(image),],});
Packer.toBlob(doc).then((buffer) => {
FileSaver.writeFileSync("My Document.docx",buffer);
});
我当前的代码在这里..我正在使用FileSaver,但不支持readFileSync方法..所以问题是如何在angualr中实现在docx文件上显示图像
import * as FileSaver from 'file-saver';
import { Document,FileSaver.readFileSync("./demo/images/pizza.gif"),});
Packer.toBlob(doc).then((buffer) => {
FileSaver.writeFileSync("My Document.docx",buffer);
});
感谢您的帮助。如果需要其他任何信息,请告诉我。
有关确切问题,请参考此链接https://stackblitz.com/edit/angular-jzfdbe?file=src%2Fapp%2Fcv-generator.ts
解决方法
我猜您要生成文件,然后立即触发下载到浏览器?
如果是这样,那么很幸运,您遇到了麻烦。此代码是跨浏览器兼容的。出于这种需要,我已经多次使用了相同的代码段。
Packer.toBlob(doc).then((blob) => {
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob,"My Document.docx");
} else {
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = "My Document.docx";
document.body.appendChild(link);
link.click();
}
});
,
嗨,伙计们,我在这个问题上挣扎了一段时间,经过几个小时的谷歌搜索,我想出了这个
定义数组缓冲区
arrayBuffer: ArrayBuffer;
从资产中获取图像并转换为arrayBuffer
this.http.get('/assets/logo-uvzsr.png',{responseType: 'blob'})
.subscribe(
res => {
const bufferPromise = res.arrayBuffer();
bufferPromise.then(
buffer =>
{
this.arrayBuffer = buffer;
}
);
}
);
在图像运行中使用
new Paragraph({
children: [
new ImageRun({
data: this.arrayBuffer,transformation: {
width: 200,height: 200,},})
]
})
我希望它会帮助某人 :) 快乐编码
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。