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

Question

安装自定义字体文件的标准方法是通过 gulp 工具，如下所述：https : //pdfmake.github.io/docs/fonts/custom-fonts-client-side/

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

方案一是修改node_modules/pdfmake/build目录下的vsf_fonts.js和pdfmake.js。在第一个中，您将添加数据，在第二个中，您将修改 defaultClientFonts 对象。我承认我说得有点含糊，因为问题是，如果您运行“npm 更新”或类似的操作，您将清除所有这些更改，下面的选项 2 更好，因为它保留了所有股票代码单独，最终它更简单。无需冗长，准确地描述了一个方法可以工作，那我，大概所有的人，建议不要。

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

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

Answer 1

• 首先，您需要获取 ttf 字体，并将其转换为可用的字体。使用像https://www.base64decode.org/这样的工具对它进行 Base64 编码 （一定要切换到编码并向下滚动一点以将文件放在那里）
• 现在你有一个文件，如：“encoded-20200619201035.txt”
• 创建一个新文件，我叫我的 GnuMICR.ttf.Base64.encoded.ts
• 将编码文件的全部内容复制/粘贴到您导出的变量中。MICR 是一种小字体，长度超过 6,000 个字符，所以“.....”你看到有 6,000 个章程，我不会用它来炸毁 stackoverflow 会使它变得不可读

GnuMICR.ttf.Base64.encoded.ts 文件只包含这一行：

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

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

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

以及导入您的字体（我的字体位于我创建的名为 fonts 的子目录中。不要使用 assets 子目录，这将在 dev 中工作，但不会被拉入以进行正确的构建）：

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

pdfmake 谈到“虚拟文件系统”，当您看到变量“ vfs _fonts”时就暗示了这一点，但实际上，它只是一个数组。您还将看到默认值是像“Roboto-Regular.ttf”这样的文件名，但这又不是虚拟文件系统上的文件：“Roboto-Regular.ttf”只是 vfs_fonts.js 数组中数据的名称. 为清楚起见，您没有对实际文件做任何事情，所有这些都使用您已经构建的 base64 编码变量。

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

 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();
  }      

好处：

• 不必安装/对抗 gulp 工具
• 您的字体存在于您的代码库中，因此它们可以处于版本控制中
• 挺容易

缺点：

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