专栏首页Jerry的SAP技术分享使用JavaScript将当前页面保存成PDF,支持图片和文字的保存
原创

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

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 将Chrome调试器里的JavaScript变量保存成本地JSON文件

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

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

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

    Jerry Wang
  • SAP CRM and C4C PDF print

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

    Jerry Wang
  • 将Chrome调试器里的JavaScript变量保存成本地JSON文件

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

    Jerry Wang
  • PDF如何转换成图片格式,这三种方法超级有效

    在我们的工作中经常会遇到一些PDF格式的文件,而且这个格式的文件在办公中很受欢迎哦,很方便人们阅读,但是也会遇到一些问题,比较喜欢PDF中的图片,想保存下来,P...

    高效办公
  • 如何玩转PDF?5款简单好用的PDF工具推荐

    在办公中会经常遇到PDF文件,也需要将PDF文件进行编辑和转换,但是对PDF直接编辑和转换是不行的,为了高效办公就需要借助工具来完成,很多人想问如何玩转PDF?...

    高效办公
  • 如何创建PDF格式文件,这个方法教你快速创建

    很多人接触到的PDF文件,很多都是从网上下载来的,而这些大都是转换来的,因为PDF本身就是比较安全,兼容性比较好,不论是在阅读还是在传输的时候都是比较便捷的,在...

    高效办公
  • PDF如何进行文字编辑?手把手教你操作

    PDF文件是现在很多办公室都会用到的一种文件格式,在办公中随处可见它的身影,虽然PDF格式有很多的优点,如安全性高,排版精美,但是它却是很难进行编辑和修改的,P...

    高效办公
  • PDF的最简单处理方案之一。

    课代表
  • 如何把 网页 转换为 PDF

    JNingWei

扫码关注云+社区

领取腾讯云代金券