Angular中如何为jsPDF引入自定义字体？求解决方案

你之前的代码问题出在addFileToVFS的第二个参数——它需要的是字体文件的Base64编码字符串，而不是字体名称。下面是两种可行的解决方案，按步骤操作即可：

方案一：使用jsPDF字体转换器生成的脚本文件 #

1. 下载Montserrat字体TTF文件，放到项目的src/assets/fonts目录下。
2. 用jsPDF的字体转换器（可通过npm包jspdf-fontconverter本地运行）将TTF文件转换成JS格式的字体注册脚本，转换后的内容类似：

   (function (jsPDFAPI) {
     jsPDFAPI.addFont('BASE64编码内容', 'Montserrat', 'normal');
   })(jsPDF.API);
   

3. 在angular.json的architect.build.options.scripts数组中添加这个脚本路径，注意要放在jsPDF脚本之后：

   "scripts": [
     "node_modules/jspdf/dist/jspdf.min.js",
     "src/assets/fonts/montserrat-regular.js"
   ]
   

4. 在组件中直接调用：

   const doc = new jsPDF('p', 'mm', 'a4');
   doc.setFont('Montserrat');
   doc.text('测试Montserrat字体', 10, 10);
   doc.save('test.pdf');
   

方案二：手动通过API加载字体 #

1. 将Montserrat字体TTF文件转换成Base64字符串（Mac/Linux可用命令base64 -i Montserrat-Regular.ttf，Windows PowerShell用[Convert]::ToBase64String([IO.File]::ReadAllBytes("Montserrat-Regular.ttf"))）。
2. 在组件中定义Base64常量（或单独存成ts文件导出）：

   const MONTSERRAT_REGULAR_BASE64 = '转换好的Base64字符串';
   

3. 正确调用jsPDF的API：

   const doc = new jsPDF('p', 'mm', 'a4');
   // 将字体添加到虚拟文件系统
   doc.addFileToVFS('Montserrat-Regular.ttf', MONTSERRAT_REGULAR_BASE64);
   // 注册字体（参数：文件名、字体名、字体样式）
   doc.addFont('Montserrat-Regular.ttf', 'Montserrat', 'normal');
   // 设置并使用字体
   doc.setFont('Montserrat');
   doc.text('这是自定义字体的文本', 10, 10);
   doc.save('custom-font.pdf');
   

常见排查点 #

• 确认angular.json的assets数组包含src/assets/fonts，确保字体文件能被Angular正确打包：

  "assets": ["src/favicon.ico", "src/assets", "src/assets/fonts"]
  

• 检查Base64字符串是否完整，无多余换行或空格。
• 确保字体名称前后一致：addFont的第二个参数是自定义字体名，后续setFont必须使用相同名称。

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