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

Question

我刚刚开始阅读 PDFMake 的文档，以便在我的 Angular 应用程序中构建文档，我遇到了一些类似这样的问题，但从未得到答案。

我想知道是否有人知道或可以提供一个可读的示例，说明如何在 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 使用该字体。

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

编辑：按照文档，我能够通过直接修改 pdfmake node_modules 目录中找到的文件来使用 Lato 字体，它可以工作，但我想避免对 node_modules 进行更改，因为我无法保留跟踪这些更改或在不同计算机上运行项目时使它们可用。

Answer 1

v0.2.7 更新

我最近将 Angular 更新到了最新的 15 版本。为此，我将 pdfMake 从 0.1.68 升级到了 0.2.7。

现在通过 URL 上传自定义字体变得更加容易。

如果您在以前的版本上按照以下说明进行操作并升级了 pdfMake，那么这些更改对我有用。

在您使用 pdfMake 的组件中。进口申报确实是这样的：

import pdfMake from 'pdfmake/build/pdfmake.min';
pdfMake.fonts = FONTS;

更改为默认 TS 实现。

import * as pdfMake from "pdfmake/build/pdfmake";

CreatePdf 现在采用三个参数，其中之一是字体。在这里，我插入了对以普通、粗体、斜体和粗斜体定义字体的约束的引用。

pdfMake.createPdf(docDefinition, null, FONTS);

这个对我有用。

=================================================== =====

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

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 构建字体

新的 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. 接下来更改我的角度组件中导入声明的路径（您应该已经有了这个）：

   // 从 'pdfmake/build/vfs_fonts' 导入 pdfFonts；

   从 '../../assets/js/vfs_fonts' 导入 pdfFonts；

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

   pdfMake.fonts = { Baloo2: { 正常: 'Baloo2-Regular.ttf', 粗体: 'Baloo2-Regular.ttf', 斜体: 'Baloo2-Regular.ttf', 粗体: 'Baloo2-Regular.ttf' } }

8) 在 pdfDefinition 中包含新字体

defaultStyle: {
  font: 'Baloo2'
},

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

Answer 2

现在有一种比接受的答案更简单的方法（自版本 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`,
    }
};