jsPDF: 客户端生成 PDF

6,825 阅读2分钟

# 客户端生成 PDF (2种)

jsPDF官网 html2canvas官网

实现一: jsPDF
实现二: jsPDF + html2canvas

方案一: jsPDF 实现:

  • 引入 jsPDF 文件: cdn 引入:
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>

Using npm:

npm install jspdf --save
  • 代码实现 ( pdf.text() ):
  let pdf = new jsPDF()
  pdf.text('Hello world!', 10, 10)
  pdf.save('导出.pdf')
  • 代码实现 ( pdf.fromHTML() ):
let pdf = new jsPDF()
pdf.fromHTML(document.getElementById('box'), 10, 10)

问题:中文乱码

导出含有中文文件的过程中发现中文显示乱码,根据文档发现jsPDF不支持中文,接下来会说 第二种实现方式: html2canvas 方式转换 canva 方式。根据项目 jsPDF-CustomFonts-support 引入中文字体,解决了部分导出 pdf 后中文字体显示乱码的问题。 这个插件并没有 CDN,将项目源码下载到本地,dist文件夹下为相关脚本,font 文件夹下为相关字体文件。

测试代码:

引入 字体库

  let pdf = new jsPDF();

  pdf.addFont('NotoSansCJKjp-Regular.ttf', 'NotoSansCJKjp', 'normal');

  //pdf标题设置
  pdf.setFont('NotoSansCJKjp');

  pdf.text('终于过上了小时候梦想的年纪,是否还记得小时候幻想的样子', 10, 10)
  pdf.save('导出.pdf')

BUT 经测试后,仍有 30%-40% 的中文不能正常显示。针对国内实际的业务逻辑,中文不能正常显示这个方案是行不通的。 官网 我只找到 html() 的一个方法,也是说结合 html2canvas 来实现。

AND pdf.fromHTML() 方法在实现 存在表格的PDF文件中,麻烦程度不亚于 jsPDF + html2canvas 的实现

方案二: jsPDF + html2canvas 实现

jsPDF 插件对中文支持不够友好,会出现乱码问题。目前比较好的解决办法是,中文部分使用图片替换。还有一种做法是制作一个文字包。这种做法需要对源码有很深的理解。 感觉这样麻烦的,可以把所有内容都加入 Canvas 中,使用 html2canvas 插件将 canvas 中内容转换成图片,然后jspdf 中显示图片即可

曾经写过一篇具体实现 请参考

缺点:

  • 分页需要手动计算;
  • 分页中不能检测 DOM, 遇到表格的时候 会直接切断;
  • 添加 表头/表尾复杂;
  • 生成的文件体积大;

方案三: pdfkit + svg-to-pdfkit + voilab-pdf-table

大同小异 没有测试。

总结: 经过好几个小时的尝试以及 查阅资料,(目前项目是后端实现),关于 PDF 生成,要根据自己的业务逻辑来选择实现。 如果只是做页面打印,觉得 window.print() 挺不错的 一个比较冷门的浏览器打印知识。

后续会学习一下,再自己做总结。 参考文档