如何在 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'
},

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

Answer 2

我很难让 Gulp 处理 Windows，所以我采用了一种完全跳过 Gulp 的简化方法。我在这里发布了它的问答样式：How can I use custom fonts in pdfmake without using the gulp tool?

是的，它是为了 Angular。

Answer 3

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

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

Answer 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`,
    }
};

Answer 5

问题：pdfmake中的默认字体系列是Roboto，但我想要Arial作为我的字体系列。

我在我的 Angular 项目中遇到过这个问题，并通过执行以下步骤得到解决。

1/全局安装“pdfmake-font-generator”包

npm i -g pdfmake-font-generator

2/ 下载所需的字体文件，在我的例子中是Arial，所以在下面使用link

https://www.cufonfonts.com/font/arial

3/ 将它们存储在某处，例如 assests/fonts 文件夹

4/ 使用以上安装包生成自定义字体文件

pdfmakefg assets/fonts assets/custom-fonts.js

它包含2个参数，第一个是我们的文件所在的位置，第二个是必须生成的位置和文件名（cutom-fonts.js文件之前不需要存在）

5/ 现在，无论你在哪里使用 pdfmake，你都会发现下面一行，评论并使用你自己的自定义字体

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

从“./../assets/custom-fonts”导入 pdfFonts；

6/ 现在在定义文档时按如下方式使用它

pdfMake.fonts = {
 'Arial' : {
   normal: 'ARIAL.TTF',
   bold: 'ARIALBD.TTF',
   italics: 'ARIALI.TTF',
   bolditalics: 'ARIALBI.TTF'
 }
}

const documentDefinition = {
 content: '',
 defaultStyle: {
  font: 'Arial'
 }
}
pdfMake.createPdf(documentDefinition).open();

Answer 6

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = {
  ...pdfFonts.pdfMake.vfs,
  'Your-font-name-normal.ttf': 'Your font as base64 format'
};

// add font to fonts collection before generate pdf
pdfMake.fonts = {
  YourFontName: {
    normal: 'Your-font-name-normal.ttf',
  },
};

const docDefinition = {
  defaultStyle: {
    font: 'YourFontName', // your font name here
  },
  content: [...]
}

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

How to import custom fonts for PDFMake in Angular application?

pdf

pdf-generation

typescript

pdfmake

angular