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；

pdfMake.vfs = {
  "fontFile.ttf": "xxxxx",
  "fontFile2.ttf": "xxxxx",
  "fontFile3.ttf": "xxxxx",
  "fontFile4.ttf": "xxxxx"
}

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

pdfMake.fonts = {
   yourFontName: {
     normal: 'fontFile.ttf',
     bold: 'fontFile2.ttf',
     italics: 'fontFile3.ttf',
     bolditalics: 'fontFile4.ttf'
   }
}

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

var docDefinition = {
  content: (...),
  defaultStyle: {
    font: 'yourFontName'
  }
}

优化

由于字体文件太大，电脑上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。