Javascript 如何在不使用gulp工具的情况下使用pdfmake自定义字体？

安装自定义字体文件的标准方法是通过gulp工具，如下所述：

但如果这对你来说失败了，而对我来说，在Windows上，这似乎是一个兔子洞，那么肯定有另一种方法来获得数据。是的

选项1是修改节点模块/pdfmake/build目录中的vsf_fonts.js和pdfmake.js。第一个步骤是添加数据，第二个步骤是修改defaultClientFonts对象。我承认我留下了一点模糊，因为问题是，如果你运行“npm更新”或类似的，你会删除所有的更改，下面的选项2要好得多，因为它只保留了所有的股票代码，最终会更简单。不需要详细而准确地描述一种可以工作的方法，我，可能是其他人，都反对这种方法

我的应用程序是Angular 8安装程序，在客户端生成check PDF。所以我需要一个MICR字体。（编辑以添加：升级到角度9、角度10和角度11时仍然有效。）

下面是我提出的“如何使用自定义字体”的解决方案。

• 首先，您需要获取ttf字体，并将其转换为 有用的东西。Base64使用以下工具对其进行编码 （确保切换到编码和 向下滚动一点，将文件放在上面）
• 现在您有了一个类似于“encoded-20200619201035.txt”的文件
• 创建一个新文件，我称之为我的GnuMICR.ttf.Base64.encoded.ts
• 将其中编码文件的全部内容复制/粘贴到导出的变量中。MICR是一种很小的字体，超过6000个字符长，所以“…”你看，有6000个字符我不会用它来炸stackoverflow，这会使它不可读

GnuMICR.ttf.Base64.encoded.ts文件仅包含以下一行：

现在，在您使用的主代码中，您需要在顶部包含常规pdfmake：

以及导入您的字体（我的字体位于我创建的名为“字体”的子目录中。不要使用“资产”子目录，该子目录将在dev中工作，但不会用于正确的构建）：

pdfmake谈到了“虚拟文件系统”，当您看到变量“vfs_字体”时，这就暗示了这一点，但实际上，它只是一个数组。您还会看到默认的文件名是'Roboto Regular.ttf'，但这不是虚拟文件系统上的文件：'Roboto Regular.ttf'只是vfs_fonts.js数组中数据的名称。为清楚起见，您没有对实际文件做任何操作，而是使用您已经构建的base64编码变量

到您在主代码中执行工作的位置：

好处：

• 不必安装/对抗吞咽工具
• 您的字体存在于代码库中，因此可以在版本控制中使用
• 很简单

缺点：

• 您没有将此字体添加到系统范围内可用的pdfmake“library”中，因此每次编写一些代码来制作PDF时都要这样做。如果您正在编写大量不同的PDF制作实用程序，那么其他方法可能更适合您。如果你只需要做一个，或者两个，没什么大不了的

---

我尝试了此操作，但在添加新字体时收到以下错误：{error:“在虚拟文件系统中找不到文件'Noto_Regular'}error:“在虚拟文件系统中找不到文件'Noto_Regular'”，我是这样声明的：pdfFonts.pdfMake.vfs['Noto_Regular']=notoscrular；在pdfmake字体中使用这样的字体；pdfMake.fonts={Noto:{normal:'Noto_Regular'，仔细匹配错误消息中的内容（我个人没有经历过），听起来你的风格要求“Noto_Regular”，而它应该要求“Noto”

export const strGnuMICR:string = "AAEAAAALAIAAA.....FDAUQCQ1IAAAA=";

import pdfMake       from 'pdfmake/build/pdfmake'
import pdfFonts      from 'pdfmake/build/vfs_fonts'

import { strGnuMICR } from './../../fonts/GnuMICR.ttf.Base64.encoded'

 generatePDF(){
 
 // this adds our base64 encoded data to the existing 'virtual file system'
 pdfFonts.pdfMake.vfs['GnuMICR_b64']=strGnuMICR
 
 // you're going to wipe out the standard stuff when you create this
 // variable, so we need to add the stock Roboto fonts back in. I 
 // set all fonts to the same thing, as "italic MICR" would be silly. 
 pdfMake.fonts = {
     Roboto: {
         normal:      'Roboto-Regular.ttf',
         bold:        'Roboto-Medium.ttf',
         italics:     'Roboto-Italic.ttf',
         bolditalics: 'Roboto-MediumItalic.ttf'
     },
     GnuMICR:{
         normal:      'GnuMICR_b64',
         bold:        'GnuMICR_b64',
         italics:     'GnuMICR_b64',
         bolditalics: 'GnuMICR_b64'
     },
 }
 // that's it, all the install work is done
 
 // build the pdf, using our new font via a style we define
 let docDefinition = 
     {
     content: [
         {text:'regular Roboto text'},
         {text:'and a line of MICR text follows:'},
         {text:'C11111111C A222222222A 333333333C 0123456789',style:'micr'},
         ],
     styles:{
         micr:{
             font: 'GnuMICR',
             fontSize: 12,
             }
         },
      defaultStyle:{
          font: 'Roboto',
          fontSize: 15,
          }
      };
 
     // annnnnnd generate that PDF!!
     pdfMake.createPdf(docDefinition).open();
  }