jsPDF: 客户端生成 PDF

# 客户端生成 PDF （2种）

jsPDF官网 html2canvas官网

实现一： jsPDF

实现二： jsPDF + html2canvas

方案一: jsPDF 实现:

引入 jsPDF 文件： cdn 引入:


复制代码

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() 挺不错的一个比较冷门的浏览器打印知识。

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