前端市场中的PDF
这是一个常见的需求,那么就一定有一些现成的技术方案。一种是基于服务端的实现,一种是基于客户端的实现。
相对于服务端来说,iText、wkhtmltopdf、prince这三个都是后端生成pdf的工具。可惜这三个都没有node api。
相对于客户端而言,最常见的就是Html转化方案。如JSPDF技术。
此方案的逻辑是:
- 将DOM树转换为canvas对象,可使用html2canvas完成
- 将canvas转换为图片,可使用canvas.toDataURL完成
- 将图片转换为PDF,可使用jsPDF完成
此方案的弊端也比较明显:
- 生产的PDF比较模糊,质量不高
- 浏览器兼容性,对css样式支持不够,比如阴影
- 分页效果不理想,会出现断层、缺失等问题
- 如果HTML中有外链图片,无法生成
- 由于第一步是通过DOM去生成canvas,所以针对特别长的报告,DOM尚未加载完便点击下载时,会造成报告生成问题
还有一种方案是依靠浏览器自带的打印window.print,此方案的重点在于CSS样式控制。如果你想要实现改变页面大小、边距、设置页眉页脚等等效果,可能还需要Prince(应用程序,需要安装)。
最后来说一下pdfmake技术,纯js技术实现PDF的生成,提供服务端生成和客户端生成方案,可以说是非常便捷。还提供了动态演示文档,你可以自由的拼接内容。