前端使用jsPdf导出pdf文档

本文主要是介绍前端使用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.最后还是觉得很麻烦啊!!!

这篇关于前端使用jsPdf导出pdf文档的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---