如何在 Angular 应用程序中为 PDFMake 导入自定义字体？答案

【问题标题】：How to import custom fonts for PDFMake in Angular application?如何在 Angular 应用程序中为 PDFMake 导入自定义字体？
【发布时间】：2020-05-19 16:03:45
【问题描述】：

我刚开始阅读 PDFMake 的文档以在我的 Angular 应用程序中构建文档，我遇到了一些问题，例如 this one，但从未得到答案。

我想知道是否有人知道或可以提供如何在 Angular 应用程序中为 PDFMake 导入自定义字体的可读示例，我已经下载了“Lato”字体的文件，但我不知道从哪里开始现在。

我确实导入了文档中显示的库：

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

我还看到了这样一个附加声明的示例：

pdfMake.fonts = {
  Lato: {
    normal: 'assets/fonts/Lato-Regular.ttf'
  }
};

这当然告诉我只为字体定义一个名称，它的重量，并指向该特定字体的文件位置；但在那之后我不知道如何真正告诉 PDFMake 使用该字体。

感谢任何帮助，我一直在努力寻找解决方案。

编辑：按照文档，我可以使用 Lato 字体，通过直接修改 pdfmake node_modules 目录中的文件，它可以工作，但我想避免更改node_modules 因为我无法跟踪这些更改或在另一台机器上运行项目时让它们可用。

【问题讨论】：

标签： angular typescript pdf pdf-generation pdfmake

【解决方案1】：

刚刚花了一个下午试图做同样的事情。文档最少，但我已经弄清楚了。

1) 首先，您需要在本地克隆 PdfMake 存储库。

https://github.com/bpampuch/pdfmake

2) 下载后在代码或 sublime 中打开它并在层次结构中找到示例目录，然后找到字体子目录。

我的有 Roboto 字体和其中的示例图片。我没有使用 Roboto，所以我删除了它。

3) 将要使用的所有 TTF 字体复制到字体目录中。实际上我只使用了一个，以减小文件大小。

3a) 安装 Gulp（如果未安装）

3b) 可选重命名

vfs_fonts.js

在 /build 目录下到 "vfs_fonts.js.old" 什么的。

4) 从终端或 Powershell 运行以下 gulp 命令...

gulp buildFonts

一个新的 vfs_fonts.js 将出现在 pdfMake/build 文件夹中。

4a) 这一步是可选的，但我需要编辑新创建的 vfs_fonts.js，因为它没有编译。并排查看旧保存的文件和新保存的文件，您会看到。我换了：

var vfs = {

使用现有文件声明：

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {

并删除了开始的最后一行...

if (typeof this.pdfMake !== 'undefined' && typeof this.pdfMake.addVirtualFileSystem !== 'undefined') { this.pdfMake.addVirtualFileSystem(vfs); } if (typeof module !== 'undefined') { module.exports = vfs; }

5) 接下来，我将新的 vfs_fonts.js 复制到我正在使用 PdfMake 的项目中，并将文件复制到 /assets/js

6) 接下来在我的 Angular 组件中更改导入声明的路径（你应该已经有了这个）：

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

import pdfFonts from '../../assets/js/vfs_fonts';

7) 在 pdfMake 中创建新字体。我只有一个，所以所有样式都引用相同的 TTF

pdfMake.fonts = {
  Baloo2: {
    normal: 'Baloo2-Regular.ttf',
    bold: 'Baloo2-Regular.ttf',
    italics: 'Baloo2-Regular.ttf',
    bolditalics: 'Baloo2-Regular.ttf'
  }
}

和 8) 在 pdfDefinition 中包含新字体

defaultStyle: {
  font: 'Baloo2'
},

我怀疑有更好的方法可以做到这一点，但我希望这能让你继续前进。

【讨论】：

【解决方案2】：

我很难让 Gulp 在 Windows 上运行，因此我采用了一种完全跳过 Gulp 的简化方法。我在这里发布了问答风格：How can I use custom fonts in pdfmake without using the gulp tool?

是的，它是为 Angular 设计的。

【讨论】：

【解决方案3】：

如果您使用打字脚本，请按如下方式导入：

import * as pdfMake from 'pdfmake / build / pdfmake';
import * as pdfFonts from 'pdfmake / build / vfs_fonts';

【讨论】：

【解决方案4】：

现在有一种比接受的答案更简单的方法（因为版本 0.1.66 - 在接受的答案编写后仅 18 天发布）。从那时起，您可以通过 URL 加载字体并在 Angular 中执行以下操作：

pdfMake.fonts = {
    DDIN: {
        normal: `${window.location.origin}/assets/D-DIN.ttf`,
        bold: `${window.location.origin}/assets/D-DIN-Bold.ttf`,
        italics: `${window.location.origin}/assets/D-DIN-Italic.ttf`,
    }
};

【讨论】：