自己公司经常会有一些复杂的需导出pdf或打印的票证单据之类的 和大家分享一下 由于pdf的体积较大 试了N多种办法 也无法将pdf展现出来(中文字体也..没引进来 具体引入中文字体有很多方法) 最后只能实现点击下载功能
首先说一下这个pdf的具体业务 场景大概是这样 用户发起一条计划 随着计划的执行状态 会有很多人签字 审批 票面也越来越丰富 所以说这个功能使用的频率还是比较频繁的 所以将pdf绘制的部分放到了客户端 后台只生成数据
以下是我技术调研中的一些思路
- pdf excel word 这些 不都应该是后台生成的么 让后端同学开发就完事了 由于这个功能非常频繁 如果并发高的话 服务器撑不住
- 能不能用html写好pdf的布局最后根据html+css的样式 生成pdf 毕竟html+css样式好控制一些 首选html2canvas他很很灵活 但是也有个弊端 就是不高清 打印的时候是模糊的
- 使用一个专门生成pdf的插件,最好客户端和服务端(nodejs)都能用 最后还是选择了pdfmake 选插件的唯一标准就是github星星多就完事了
开始上手
试了N多种方法 预览还是失败了 pdf文件太大了 所以只能下载了 而且在线的没法把中文字体引入进来 代码中具体结构可以参考一下
遇到的问题
中文字体的问题 中文字体打包体积太大一般的字体都要10M 随后就想到pdfmake他不能像浏览器一样使用系统默认字体么? 好像并不能行 所以就去寻找最小体积的字体
import * as pdfMake from 'pdfmake'
import * as pdfFonts from 'pdfmake-support-chinese-fonts/vfs_fonts' // 我们借用一下他的字体
pdfMake.vfs = pdfFonts.pdfMake.vfs
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Regular.ttf',
italics: 'Roboto-Regular.ttf',
bolditalics: 'Roboto-Regular.ttf'
},
fangzhen: { // 注册中文字体
normal: 'fzhei-jt.TTF',
bold: 'fzhei-jt.TTF',
italics: 'fzhei-jt.TTF',
bolditalics: 'fzhei-jt.TTF'
}
}
pdfmake-support-chinese-fonts 他的字体只有3M多 这个包已经集成了pdfmake 换句话说只用这个包的话是可以展示中文的pdf的 但是他的版本比较老(有很多不支持的功能) 所以我这里用最新的pdfmake 只不过借用一下他的字体文件而已 虽然有些麻烦但是交给打包工具就行 他不会打包未使用的代码 这样最大限度的保证了打包体积
但是有一点需要注意的是 不同风格的字体样式(加粗 倾斜)对应不同的字体文件 而且字体文件的形式有很多种 我这只是其中一种方式
