Vue项目中PDFMake自定义字体无法生效问题求助

问题根源 #

1. 字体路径配置错误：你用了本地相对路径../assets/fonts/xxx.ttf，但编译进vfs的字体需要用vfs中存储的文件名（即字体本身的文件名），pdfMake会从vfs中读取对应文件名的base64内容。
2. 未保留默认Roboto字体：覆盖pdfMake.fonts时完全替换了默认配置，导致未指定字体的内容找不到默认字体报错。
3. 修改node_modules文件不规范：直接修改依赖目录下的文件会在依赖更新时丢失，应该在项目本地处理字体和vfs生成。
4. 无效配置干扰：代码中pages: 2是pdfMake不支持的属性，会影响文档生成逻辑。

修复步骤 #

1. 项目内本地化处理字体与vfs生成

• 在项目src/assets下创建fonts文件夹，放入你的AbrilFatface、Montserrat系列ttf字体文件。
• 执行pdfMake的字体打包脚本（用项目依赖中的脚本，无需修改node_modules）：

  node node_modules/pdfmake/examples/build-vfs.js "./src/assets/fonts"
  

• 将生成的vfs_fonts.js移动到src/assets/fonts目录下。

2. 修正代码逻辑

import pdfMake from "pdfmake/build/pdfmake.js";
// 引入项目本地生成的vfs-fonts，而非node_modules中的默认文件
import pdfFonts from "@/assets/fonts/vfs_fonts.js";

// 仅需为当前pdfMake实例赋值vfs，无需挂载到window
pdfMake.vfs = pdfFonts.pdfMake.vfs;

const toPdf = document.getElementById("final").innerHTML;
const html = htmlToPdfmake(toPdf);

// 配置字体：保留默认Roboto，自定义字体使用vfs中的文件名
pdfMake.fonts = {
  // 必须保留默认Roboto，避免未指定字体的内容报错
  Roboto: {
    normal: 'Roboto-Regular.ttf',
    bold: 'Roboto-Medium.ttf',
    italics: 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-MediumItalic.ttf'
  },
  AbrilFatface: {
    normal: "AbrilFatface-Regular.ttf",
    bold: "AbrilFatface-Medium.ttf",
    italics: "AbrilFatface-Italic.ttf",
    bolditalics: "AbrilFatface-MediumItalic.ttf",
  },
  Montserrat: {
    normal: "Montserrat-Regular.ttf",
    bold: "Montserrat-Medium.ttf",
    italics: "Montserrat-Italic.ttf",
    bolditalics: "Montserrat-MediumItalic.ttf",
  },
};

const result = pdfMake.createPdf({
  // 指定文档默认字体，确保全局字体生效
  defaultStyle: {
    font: 'Montserrat' // 可替换为你需要的默认字体，比如AbrilFatface
  },
  styles: {
    alignment: "center",
    // 如需给特定样式指定字体，添加font属性
    // font: 'AbrilFatface'
  },
  pageSize: {
    width: 900,
    height: 700,
  },
  pageOrientation: "landscape",
  // 移除无效的pages属性，pdfMake不支持该配置
  content: [html],
});

result.getBase64((data) => {
  this.setPdf({
    pdf: data,
  });
});

关键注意点 #

• 自定义字体必须通过build-vfs.js编译进vfs，pdfMake才能正确加载，不能直接引用本地文件路径。
• 永远保留默认Roboto字体配置，否则未明确指定字体的HTML内容会触发字体找不到的报错。
• 避免修改node_modules目录下的文件，所有自定义资源和脚本都应放在项目本地目录中，确保依赖更新时不会丢失修改。

内容的提问来源于stack exchange，提问作者Mushood Hanif