使用JavaScript将当前页面保存成PDF，支持图片和文字的保存

时间 2019-11-19

标签使用 javascript 当前页面保存 pdf 支持图片文字栏目 JavaScript 繁體版

原文原文链接

前端开发的朋友们可能会遇到这个需求：将您负责开发的网页的所有内容，包括文字和图片，一块儿保存成一个PDF文件。若是采用屏幕截图的话，默认Windows操做系统的截图按钮没法完整截取超过一屏幕的屏幕内容。javascript

我在网上找了一段时间，搜集到了一些解决方案，在这里分享给广大程序员。html

这个解决方案包含了两个步骤，将前端页面转化为PDF:

1. 遍历当前网页的DOM结构，收集全部DOM树上每一个节点的元素信息及相应样式，渲染出canvas图像。这个遍历和渲染操做封装在脚本文件html2canvas.js里。前端

2. 利用一个开源的JavaScript库，jsPDF，在浏览器端用JavaScript生成PDF文件。PDF的生成逻辑封装在脚本文件jsPdf.debug.js里。java

看看如何在您的前端网页里使用这两个JavaScript文件。git

下面是网页内容：canvas

<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连接：

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: