首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

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

作者头像
Jerry Wang
发布2019-05-30 19:10:36
2.1K0
发布2019-05-30 19:10:36
举报

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

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

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

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

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

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

下面是网页内容:

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

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

保存整个网页成PDF

HTML转PDF的代码如下:

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

点这个按钮:

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年09月09日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 这个解决方案包含了两个步骤,将前端页面转化为PDF:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档