测试
全部博文（931）
分类： 架构设计与优化
2019-04-22 13:40:38
前端开发的朋友们可能会遇到这个需求：将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个PDF文件。如果采用屏幕截图的话，默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容。
我在网上找了一段时间，搜集到了一些解决方案，在这里分享给广大程序员。
1. 遍历当前网页的DOM结构，收集所有DOM树上每个节点的元素信息及相应样式，渲染出canvas图像。这个遍历和渲染操作封装在脚本文件html2canvas.js里。
2. 利用一个开源的JavaScript库，jsPDF，在浏览器端用JavaScript生成PDF文件。PDF的生成逻辑封装在脚本文件jsPdf.debug.js里。
看看如何在您的前端网页里使用这两个JavaScript文件。
下面是网页内容：
在这里放一段很长很长的文件，能观察到最后生成的PDF会自动分页。。。。
在您的前端页面里画一个按钮，用于触发将当前网页保存成PDF文件的事件。
HTML转PDF的代码如下：
下面可以看看这个解决方案的效果。
点这个按钮：
这是用JavaScript生成的PDF文件在本地打开的效果：
可以看到PDF中的翻页没有任何问题。
大家如果想自己体验一下通过JavaScript进行HTML转PDF的效果，可以试试我的demo：
这个解决方案最初是一位叫linwalker的程序员设计的，下面是他的github链接：
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
