前端使用jsPdf导出pdf文档

最近遇到一个需求,就是要把几个页面的数据汇总一下生成pdf报表(当然数据是后端封装好的),于是乎第一时间想到了 jspdf,但是也踩了不少坑,尤其是它竟然不支持中文.

先上点代码…

1.安装jspdf

javascript 代码

npm install -S jspdf
           

2.安装完毕后,在要使用的组件导入jsPDF(以vue为例)

javascript 代码

import jsPDF from 'jspdf';
let doc = new jsPDF();
           

3.设置一下字体

1) getFontList 获取所有可用字体列表 (但是没有中文)

2) addFont 添加字体

3) setFont 设置字体 (经测试添加中文字体并不可用)

4) 具体还是去github上看文档吧

4 使用jspdf 创建文档,来一个简单的小demo

javascript 代码

doc.text('Hello jsPDF', 10, 10);
doc.save('test.pdf');
           

5.中文问题不解决,还是用不了啊,最后找到了另一个包 (jsPDF-CustomFonts-support),该包核心还是jspdf,只不过进行了扩展,允许我们自定义字体.

它最大的问题在于一共需要加载7个js文件,其中一个是一个比较大的字体文件.

还是先说说怎么加载自定义字体来解决中文乱码问题吧

1) 按照这个文档载入必须的js文件

2) 打卡最后的js文件也就是(vfs_fonts.js),里面返回一个对象,这个对象就是字体文件的base64编码

3) 如果不需要这个字体的话,可以将里面的字体base64编码删干净,找一个中文字体(比如 微软雅黑.ttf),首先可以把字体文件压缩一下(效果不大),将该字体文件转为base64编码

4) 将转化好的base64编码放到刚才说的return 对象里面,键名可以自己定义,键值就是改字体编码

5) 然后添加字体,设置字体,跟上文提到的API一致

javascript 代码

doc.addFont('regular.ttf', 'regular', 'normal');
doc.setFont('regular');
           

这里的”regular.ttf” 就是键名, 第二个参数可以当做别名,第三个照抄就行,最后是使用该字体.

6.最后还是觉得很麻烦啊!!!