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

Question

我刚刚开始阅读 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，因为在不同的机器上运行项目时，我将无法跟踪这些更改或使它们可用。

Answer 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'
},

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