前端生成pdf文件之pdfmake.js
pdfmake.js是一个简单的生成pdf文件的插件。
pdfmake.js https://files.cnblogs.com/files/s313139232/pdfmake.min.js
代码也很简单：
html文件：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>my first export PDF</title> <script src="pdfmake.min.js"></script> <script src="vfs_fonts.js"></script> <script> function down() { var dd = { content: [ '中英文测试', 'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines' ], defaultStyle: { font: '方正姚体' } }; pdfMake.fonts = { Roboto: { normal: 'Roboto-Regular.ttf', bold: 'Roboto-Medium.ttf', italics: 'Roboto-Italic.ttf', bolditalics: 'Roboto-Italic.ttf' }, 方正姚体: { normal: 'FZYTK.TTF', bold: 'FZYTK.TTF', italics: 'FZYTK.TTF', bolditalics: 'FZYTK.TTF', } }; pdfMake.createPdf(dd).download(); } </script> </head> <body> <button onclick="down()">下载</button> </body> </html>
代码中会引用两个技术，pdfmake.min.js vfs_fonts.js
其中pdfmake.min.js是pdfmake的支持文件，而vfs_fonts.js是字体文件（.ttf）打包成的js文件。
content中pdf的内容拼接：
内容拼接类似于html+css，但是写法为pdfmake插件自带，可以去pdfmake的github首页介绍中查看。
字体文件（.ttf）打包可以通过pdfmake的github上的源文件进行打包制作。
下面是两种字体的vfs_fonts.js文件：
方正姚体 https://files.cnblogs.com/files/s313139232/方正姚体vfs_fonts.js
Roboto-Itali https://files.cnblogs.com/files/s313139232/Roboto-Italivfs_fonts.js
注意：中文的字体文件较大，打包出来多数都在10M以上，推荐方正姚体等ttf文件较小的字体进行打包。
打包教程：http://www.cnblogs.com/xrab/p/7210588.html
打包步骤：
1.在https://github.com/bpampuch/pdfmake下载pdfmake的源文件
2.在根目录用 npm 安装 gulp
npm install gulp --save-dev
3.安装pdfmake依赖包
npm install
4.在cmd运行打包examples/fonts中的.ttf文件的命令。
gulp buildFonts
5.然后在 build 文件中可以找到vfs_fonts.js文件。
由于字体打包文件较大，建议examples/fonts中的.ttf文件只放置一个字体文件。