前端开发的朋友们可能会遇到这个需求：将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个PDF文件。如果采用屏幕截图的话，默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容。
我在网上找了一段时间，搜集到了一些解决方案，在这里分享给广大程序员。
这个解决方案包含了两个步骤，将前端页面转化为PDF:
1. 遍历当前网页的DOM结构，收集所有DOM树上每个节点的元素信息及相应样式，渲染出canvas图像。这个遍历和渲染操作封装在脚本文件html2canvas.js里。
2. 利用一个开源的JavaScript库，jsPDF，在浏览器端用JavaScript生成PDF文件。PDF的生成逻辑封装在脚本文件jsPdf.debug.js里。
看看如何在您的前端网页里使用这两个JavaScript文件。
<script type="text/javascript" src="html2pdf/html2canvas.js"></script>
<script type="text/javascript" src="html2pdf/jsPdf.debug.js"></script>
下面是网页内容：
<html>
<p>在这里放一段很长很长的文件，能观察到最后生成的PDF会自动分页。。。。</p>
在您的前端页面里画一个按钮，用于触发将当前网页保存成PDF文件的事件。
<button id="renderPdf">保存整个网页成PDF</button>
HTML转PDF的代码如下：
如果想下载可以复制粘贴的代码文本，可以到这个链接下载。https://github.com/linwalker/render-html-to-pdf
下面可以看看这个解决方案的效果。
点这个按钮：
这是用JavaScript生成的PDF文件在本地打开的效果：
可以看到PDF中的翻页没有任何问题。
大家如果想自己体验一下通过JavaScript进行HTML转PDF的效果，可以试试我的demo：http://i042416.github.io/FioriODataTestTool2014/WebContent/092_html2pdf.html
这个解决方案最初是一位叫linwalker的程序员设计的，下面是他的github链接：
https://github.com/linwalker/render-html-to-pdf
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 ...
15.2.3 使用readAsDataURL方法预览图片 286 15.2.4 使用readAsText方法读取文本文件 287 15.2.5 FileReader接口中的事件 288 15.3 拖放API 290 15.3.1 实现拖放的步骤 290 15.3.2 通过拖放显示欢迎...
主要功能有：缩略图片，图片水印，文字水印，调整光暗，反色处理，浮雕处理，拉伸处理，左右翻转，上下翻转， 压缩图片，图片灰度化，转换为黑白图片，获取图片中的各帧 ImageDown 主要功能，把图片下载到本地 ...
实例052 使用位运算对数字进行加密和解密 83 2.3 包含语句 84 实例053 提高代码重用率 84 实例054 包含数据库连接文件 85 实例055 包含网站头文件 86 实例056 包含网站尾文件 87 实例057 包含网站的主文件 88 2.4 ...
主要功能有：缩略图片，图片水印，文字水印，调整光暗，反色处理，浮雕处理，拉伸处理，左右翻转，上下翻转， 压缩图片，图片灰度化，转换为黑白图片，获取图片中的各帧 ImageDown 主要功能，把图片下载到本地 ...
实例052 使用位运算对数字进行加密和解密 83 2.3 包含语句 84 实例053 提高代码重用率 84 实例054 包含数据库连接文件 85 实例055 包含网站头文件 86 实例056 包含网站尾文件 87 实例057 包含网站的主文件 88 2.4 ...
有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以改进做成小工具。 Java右键弹出...
有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以改进做成小工具。 Java右键弹出...
支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,...
有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以改进做成小工具。 Java右键弹出...
有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以改进做成小工具。 Java右键弹出...
有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以改进做成小工具。 Java右键弹出...
支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,...
支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,...