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

animabear 发布于2019-08-23 12:32 / 3768人阅读

摘要：前端开发的朋友们可能会遇到这个需求将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个文件。在您的前端页面里画一个按钮，用于触发将当前网页保存成文件的事件。

前端开发的朋友们可能会遇到这个需求：将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个PDF文件。如果采用屏幕截图的话，默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容。

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

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

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

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

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

下面是网页内容：

在这里放一段很长很长的文件，能观察到最后生成的PDF会自动分页。。。。

在您的前端页面里画一个按钮，用于触发将当前网页保存成PDF文件的事件。

HTML转PDF的代码如下：

如果想下载可以复制粘贴的代码文本，可以到这个链接下载。https://github.com/linwalker/...

下面可以看看这个解决方案的效果。

点这个按钮：

这是用JavaScript生成的PDF文件在本地打开的效果：

可以看到PDF中的翻页没有任何问题。

大家如果想自己体验一下通过JavaScript进行HTML转PDF的效果，可以试试我的demo：http://i042416.github.io/Fior...

这个解决方案最初是一位叫linwalker的程序员设计的，下面是他的github链接：

https://github.com/linwalker/...

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

云服务器 GPU云服务器保存成图片 js 保存当前页面数据类型 java将pdf转成图片将文字转换成语音的软件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98708.html

Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF

摘要：最近碰到个需求，需要把当前页面生成，并下载。但这并不是真的截图，而是通过遍历页面结构，收集所有元素信息及相应样式，渲染出。由于只能将它能处理的生成，因此渲染出来的结果并不是与原来一致。最近碰到个需求，需要把当前页面生成pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要：）项目源码地址：https://github.com/linwalker/... html2...

macg0406 2019-08-20 16:05 评论0 收藏0
Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF

摘要：最近碰到个需求，需要把当前页面生成，并下载。但这并不是真的截图，而是通过遍历页面结构，收集所有元素信息及相应样式，渲染出。由于只能将它能处理的生成，因此渲染出来的结果并不是与原来一致。最近碰到个需求，需要把当前页面生成pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要：）项目源码地址：https://github.com/linwalker/... html2...

codecraft 2019-08-01 16:43 评论0 收藏0
前端实现html转pdf方法总结

摘要：比上面的稍微好点，支持了一些方面的东西，具体看这个中文配置参数评价这种方法前端实现，灵活简单，而且在页面还原上是很好的，生成的过程不需要自己操心，页面样式还可控，可以说是非常不错的。最近要搞前端html转pdf的功能。折腾了两天，略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示，也算是回馈社区。经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式，各有各有优...

Heier 2019-08-02 16:04 评论0 收藏0
前端实现html转pdf方法总结

摘要：比上面的稍微好点，支持了一些方面的东西，具体看这个中文配置参数评价这种方法前端实现，灵活简单，而且在页面还原上是很好的，生成的过程不需要自己操心，页面样式还可控，可以说是非常不错的。最近要搞前端html转pdf的功能。折腾了两天，略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示，也算是回馈社区。经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式，各有各有优...

gekylin 2019-08-29 16:40 评论0 收藏0
前端实现html转pdf方法总结

摘要：比上面的稍微好点，支持了一些方面的东西，具体看这个中文配置参数评价这种方法前端实现，灵活简单，而且在页面还原上是很好的，生成的过程不需要自己操心，页面样式还可控，可以说是非常不错的。最近要搞前端html转pdf的功能。折腾了两天，略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示，也算是回馈社区。经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式，各有各有优...

yvonne 2019-08-23 11:51 评论0 收藏0