我尝试在我的Vue项目中使用PDFMake和htmlToPdfMake将一些HTML转换为PDF。默认情况下,PDFMake只支持Roboto,但我想添加一些自定义字体,所以我将字体文件(.ttf)
添加到./node_modules
内的PDFMake文件夹中的./examples/fonts
。然后我使用node build-vfs.js "./examples/fonts"
命令编译了一个新的vfs-fonts.js
文件。这是我的代码。
import pdfMake from "pdfmake/build/pdfmake.js";
import pdfFonts from "pdfmake/build/vfs_fonts.js";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.pdfMake.vfs = pdfFonts.pdfMake.vfs;
const toPdf = document.getElementById("final").innerHTML;
const html = htmlToPdfmake(toPdf);
pdfMake.fonts = {
AbrilFatface: {
normal: "../assets/fonts/AbrilFatface-Regular.ttf",
bold: "../assets/fonts/AbrilFatface-Medium.ttf",
italics: "../assets/fonts/AbrilFatface-Italic.ttf",
bolditalics: "../assets/fonts/AbrilFatface-MediumItalic.ttf",
},
Montserrat: {
normal: "../assets/fonts/Montserrat-Regular.ttf",
bold: "../assets/fonts/Montserrat-Medium.ttf",
italics: "../assets/fonts/Montserrat-Italic.ttf",
bolditalics: "../assets/fonts/Montserrat-MediumItalic.ttf",
},
};
const result = pdfMake.createPdf({
styles: {
alignment: "center",
},
pageSize: {
width: 900,
height: 700,
},
pageOrientation: "landscape",
pages: 2,
content: [html],
});
result.getBase64((data) => {
this.setPdf({
pdf: data,
});
});
如您所见,我手动设置了pdfMake窗口对象,还包括了pdfMake和vfs-fonts js文件,并提供了一个pdfMake.fonts
对象。即使在完成所有这些操作后,仍然出现以下错误:
我不知道为什么它不工作。请帮助。
1条答案
按热度按时间l7wslrjt1#
OP解决了这个问题,它将字体放在与使用它的代码相同的目录中(而不是
node_modules
)。无论如何,实际上不应该在那里添加任何内容,因为它是易失性的,通常在生产服务器上无法访问。