自定义字体在PDFMake for Vue中无效

qgelzfjb  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(311)

我尝试在我的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对象。即使在完成所有这些操作后,仍然出现以下错误:

我不知道为什么它不工作。请帮助。

l7wslrjt

l7wslrjt1#

OP解决了这个问题,它将字体放在与使用它的代码相同的目录中(而不是node_modules)。
无论如何,实际上不应该在那里添加任何内容,因为它是易失性的,通常在生产服务器上无法访问。

相关问题