我刚开始阅读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进行更改,因为我无法跟踪这些更改,或者在不同的机器上运行项目时无法使用它们。
7条答案
按热度按时间6rvt4ljy1#
我刚刚花了一个下午的时间试图做同样的事情。文档是最低限度的,但我已经想通了。
1)首先,您需要在本地克隆PdfMake repo。
https://github.com/bpampuch/pdfmake
2)一旦下载,打开它在代码或崇高和位于层次结构,找到例子目录,然后字体子目录。
我的有Roboto字体和一个示例图片,我没有使用Roboto,所以我删除了它。
3)复制所有你想用的TTF字体到fonts目录中。实际上我只用了一种字体,这样可以减小文件的大小。
3a)安装Gulp(如果未安装)
3b)* 可选 * 重命名
/build目录中的“vfs_fonts.js.old”或其他内容。
4)从您的终端或Powershell运行以下gulp命令...
一个新的vfs_fonts.js将出现在pdfMake/build文件夹中。
4a)这一步是可选的,但我需要编辑新创建的vfs_fonts. js,因为它没有编译。并排查看旧保存的文件和新文件,你会看到。我替换了:
使用现有的文件声明:
删除了最后一行
5)接下来,我将新的vfs_fonts. js复制到我使用PdfMake的项目中,并将该文件复制到/assets/js中
6)接下来,在我的angular组件中更改导入声明的路径(你应该已经有了这个):
7)在pdfMake中创建一个新字体。我只有一个字体,所以所有样式都引用相同的TTF
和8)包括您的新字体在您的pdfDefinition
我怀疑有更好的方法来做到这一点,但我希望这能让你去。
fhg3lkii2#
现在有一种比接受答案更简单的方法(从版本0.1.66开始-在接受答案编写后仅18天发布)。从那时起,您可以通过URL加载字体,并在Angular中执行以下操作:
2eafrhcq3#
问题:pdfmake默认字体家族是Roboto,但我想用Arial作为字体家族。
我在我的Angular项目中遇到了这个问题,并通过以下步骤解决了这个问题。
1/全局安装“pdfmake-font-generator”包
npm i -g pdfmake-font-generator
2/下载所需的字体文件,在我的情况下Arial,所以使用下面的链接
https://www.cufonfonts.com/font/arial
3/将它们存储在某个地方,例如assests/fonts文件夹中
4/使用上面安装的软件包生成自定义字体文件
pdfmakefg assets/fonts assets/custom-fonts.js
它包含2个参数,第一个是我们的文件存在的位置,第二个位置和文件名,必须生成(cutom-fonts.js文件不需要之前存在)
5/现在,无论你在哪里使用pdfmake,你会发现下面的一行,评论,并使用自己的自定义字体
// import pdfFonts from 'pdfmake/build/vfs_fonts';
import pdfFonts from“./../assets/custom-fonts”;
6/现在在定义文档时使用如下
mum43rcc4#
我在Windows上让Gulp工作时遇到了困难,所以我用了一个简化的方法,完全跳过了Gulp。我在这里发布了Q&A风格:How can I use custom fonts in pdfmake without using the gulp tool?
是的,这是为了Angular。
ujv3wf0j5#
如果使用键入脚本,请按如下方式导入它:
c9qzyr3d6#
pw136qt27#
如果有人使用Webpack,这对我很有效: