前端html页面打印PDF
- 原创
- |
- 浏览: 4237
- |
- 更新:
纯前端实现HTML页面打印PDF 解决了中文问题、图片插入、文字换行、表格自动分页、 页眉页脚的添加、行高问题(新的jspdf可能有其他的用法)、文字被截断的问题
方法/步骤
-
然后你的页面可能会有table 把jspdf.plugin.autotable.js 下载下来
链接 https://github.com/simonbengtsson/jsPDF-AutoTable
autotable的用法请参照链接 http://www.hangge.com/blog/cache/detail_2208.html
-
这个时候你会发现不支持中文
首先jspdf中文解决办法
参考链接 https://blog.csdn.net/kunga0814/article/details/81869183
-
接下来是table中文解决办法
由于antotable 不支持中文 他的源码里设置的默认字体是英文
我们去源码中改成中文
然后设置table中的字体
参考链接 http://www.hangge.com/blog/cache/detail_2213.html
-
接下来 说下一个问题 插入图片
首先引用一个图片转base64的方法
然后页面中 就可以使用jspdf的图片基础用法doc.addImage()
需要注意一点的就是,这个图片一定要在你的页面中用到了,也就是说你页面中有这个图片你才能在jpdf中使用。如果这个图片在你的页面中没有用到你可以把图片在页面中添加上,然后设置样式为
-
换行问题
doc.text(doc.splitTextToSize('内容', 530), leftmargin, 500);
行高问题(lineHeight)
doc.setLineHeightFactor(2)
-
页眉页脚的添加
如果你是使用doc.addPage()增加的页面,那么你需要手动添加代码
如果你是表格自动分页 那么你需要修改一下源码
-
文字被截断的问题
我用的是一个很笨的方法(没想到更好的解决办法) 就是把文字内容用autotable 显示出来
因为他不会被截断 他会自己跳到下一页
END