前因

大佬说要把现在项目的一些表格用pdf导出来，那就做呗，程序员嘛，百度梭就是了，找到了两个方法，都是前端实现的。

• html2canvas+pdfJS 直接把页面所看见的东西全部保存成一张canvas图片然后转成pdf
  优点：所见即所得，不影响页面原有功能
  缺点：太糊了

• pdfMake 用它定义的一套书写规则写一个对象，插件会把这个对象渲染成pdf导出来
  优点：清晰，太清晰了
  缺点：本身不支持中文，要自己另配置比较麻烦，而且中文字体包都比较大，4M起步

但我还是选了pdfMake，因为这个功能不需要编辑，只是数据的展示和pdf的下载，而且考虑到以后会加一键下载多个pdf的功能，还是用pdfMake比较方便填入数据。

学习

3天前，pdfMake的官网文档还是只有几行的东西，我惊了，除了download，open等几个API就没别的了，我就想着把github的代码下载下来看看有什么接口，发现了一个getBase64() 可以获取pdf的base64格式数据，我就自己加上data:type/pdf;base64头来合成一个url，效果还不错，直到我看到了download下来的README.md文件，惊了，清晰明了我把它用机器翻译成了中文，大家可以看看 pdfMake中文文档,发现了一个getDataUrl()可以直接获取url，代码又好看了一点

中文支持

pdfMake是不支持中文的，具体操作我懒得说了，百度前几篇综合看就明白了，我说一下总体思路和注意事项吧，

• 把一个ttf文件拉到pdfMake存放字体的文件（注意ttf后缀要小写，pdfMake的源码都是小写ttf，而windows的fonts拉出来的是TTF大写后缀）
• src-browser-extensions-pdfMakes.js里修改,这里我是改成微软雅黑

var defaultClientFonts = {
    Roboto: {
        normal: 'simhei.ttf',
        bold: 'simhei.ttf',
        italics: 'simhei.ttf',
        bolditalics: 'simhei.ttf'
    }
};

• 删掉原来的字体文件，然后用gulp打包出vfs_fonts.js

gulp buildFonts

就基本ok了