如何在Angular应用程序中导入PDFMake的自定义字体? [英] How to import custom fonts for PDFMake in Angular application?

问题描述

我刚刚开始阅读PDFMake的文档以在Angular应用程序中构建文档，我遇到了一些问题，例如

I just started reading into PDFMake's documentation to build a document in my Angular app, I've come across some questions like this one but never got an answer.

我想知道是否有人知道或可以提供一个可读的示例，说明如何在Angular应用程序中导入PDFMake的自定义字体，我已经下载了"Lato"字体的文件，但是我不知道在何处进行现在.

I was wondering if someone knows or could provide a readable example of how to import custom fonts for PDFMake in an Angular application, I've downloaded the files for the "Lato" font, but I have no clue on where to proceed now.

我确实按照文档中所示导入了库:

I did import the library as shown on the documentation:

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

我还看到了一个示例，其中进行了如下附加声明:

I also saw an example where an additional declaration was made like this:

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

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

Which of course tells me to just define a name for the font, the weight of it, and point to the location of the file for that specific font; but after that I don't know how to actually tell PDFMake to use that font.

感谢您的帮助，一段时间以来，我一直在努力寻找解决方案.

Any help is appreciated, I have been trying to find solutions for this for a while.

在阅读文档之后，通过直接修改pdfmake node_modules目录中的文件，我能够使用Lato字体，但是可以，但是我想避免对node_modules，因为在其他计算机上运行项目时，我将无法跟踪这些更改或使这些更改可用.

Following the docs, I was able to use the Lato font, by directly modifying the files found in the pdfmake node_modules directory, it works, but I'd like to avoid making changes to node_modules since I wouldn't be able to keep track of those changes or have them available when running the project on a different machine.

推荐答案

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

have just spent an afternoon trying to do the same. The documentation is at minimum, but I have figured it out.

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

1) First you need to clone the PdfMake repo locally.

https://github.com/bpampuch/pdfmake

2)下载后，以代码或sublime格式打开它，并在层次结构中找到examples目录，然后是fonts子目录.

2) Once downloaded open it up in code or sublime and located in the hierarchy find the examples directory and then the fonts sub directory.

我的里面有Roboto字体和示例图片.我没有使用Roboto，因此将其删除.

Mine had the Roboto font and a sample picture within it. I'm not using Roboto so I deleted it.

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

3) Copy into the fonts directory all the TTF fonts you want to use. Actually I was only using one, to keep the file size down.

3a)安装Gulp(如果尚未安装)

3a) Install Gulp (if its not installed)

3b)(可选)重命名

vfs_fonts.js 

/build目录中的"vfs_fonts.js.old"之类的东西.

in the /build directory to "vfs_fonts.js.old" or something.

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

4) Run the following gulp command from your Terminal or Powershell...

gulp buildFonts

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

a new vfs_fonts.js will appear in the pdfMake/build folder.

4a)此步骤是可选的，但由于未编译，因此我需要编辑新创建的vfs_fonts.js.并排查看旧的已保存文件和新文件，您将看到.我替换:

4a) This step is optional but I needed to edit the newly created vfs_fonts.js as it didn't compile. Look at the old saved file and the new one side by side and you will see. I replaced:

var vfs = {

具有现有文件声明:

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

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

and removed the last line starting...

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

5) Next I copied the new vfs_fonts.js to my project where I am using PdfMake and copied the file into /assets/js

6)接下来，在我的角度组件中更改导入声明的路径(您应该已经拥有了):

6) next change the path to the import declaration in my angular component (you should already have this):

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

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

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

7) Create a new font in pdfMake. I only have one so all styles are referencing the same TTF

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

和8)在pdfDefinition中包含新字体

and 8) include your new font in your pdfDefinition

defaultStyle: {
  font: 'Baloo2'
},

我怀疑有更好的方法可以做到这一点，但我希望这可以帮助您前进.

I suspect there are better ways to do this, but I hope this gets you going.

这篇关于如何在Angular应用程序中导入PDFMake的自定义字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！