pdfmake

Client/server side PDF printing in pure JavaScript

Check out the playground and examples.

使用中文

pdfmake原文档有说明如何使用自定义字体Custom Fonts client side

通过看文档和gulpfile.js之后发现，主要3个点实现自定义字体：

1. 把字体文件base64之后得到的字符串赋值给pdfMake.vfs；

1pdfMake.vfs = {
2  "fontFile.ttf": "xxxxx",
3  "fontFile2.ttf": "xxxxx",
4  "fontFile3.ttf": "xxxxx",
5  "fontFile4.ttf": "xxxxx"
6}

2. 在pdfMake.fonts中声明要用到的字体；

1pdfMake.fonts = {
2   yourFontName: {
3     normal: 'fontFile.ttf',
4     bold: 'fontFile2.ttf',
5     italics: 'fontFile3.ttf',
6     bolditalics: 'fontFile4.ttf'
7   }
8}

3. 在PDF文档结构中指定使用的字体名称

1var docDefinition = {
2  content: (...),
3  defaultStyle: {
4    font: 'yourFontName'
5  }
6}

优化

由于字体文件太大，电脑上copy过来的字体大小在10~20M，不适合直接拿来用。这里我们在2个方向做了优化。

1. 精减字体，提取7000常用汉字； 使用font-spider对字体做精简，具体可参考font-min-cut
2. 分切base64之后的字符串，并行加载，然后在客户端拼接； 在gulpfile.json中，我添加了splitFontstask，gulp splitFonts之后会在build/splits目录下生成分切后的js文件。

Note

1. 由于font-spider存在无法提取空格的bug，所以需要使用fontcreator进行字体编辑，添加空格，only windows版本。
2. ./examples/fonts中的regular.ttf、bold.ttf已经添加了空格，但是在观麦的配送单模块中，时常会出现某些客户的sku名称存在生僻字不在我们的7000常用字当中，这时需要我们提取这些生僻字，然后通过fontcreator软件把提取出来的生僻字添加到regular.ttf、bold.ttf中，然后重新gulp splitFonts。