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

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

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

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

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

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

下面是网页内容:

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

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

保存整个网页成PDF

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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

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

  1. Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF

    1.常见用法           using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...

  2. 利用Microsoft.Office.Interop.Excel 将web页面转成PDF

    网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...

  3. 【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页

    1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...

  4. 在线提取PDF中图片和文字

    无需下载软件,你就可以在线提取PDF中图片和文字,http://www.extractpdf.com/不仅可以获取本地PDF文档的图片和文字,还能获取远程PDF文档的图片和文字.如下图所示:结果本人测 ...

  5. 在线扫描PDF JPG 图片上面文字

    在线扫描PDF JPG 图片上面文字

  6. html页面转换成pdf

    一般页面都是.jsp页面,所以要把.jsp转换成html,在生成pdf,在网上找了好多方法,只有用一个插件,wkhtmltopdf-0.8.3.exe,生成的pdf会相对的好看. 先附上我做的.jsp ...

  7. 利用itext将html页面转成pdf(不模糊)

    1.maven项目进入依赖 <dependency> <groupId>org.xhtmlrenderer</groupId> <artifactId> ...

  8. vue将页面导出成pdf

    npm i jspdf-html2canvas prinOut(){ // 导出pdf let page = document.querySelector('.app-main'); // page ...

  9. Vue 页面导出成PDF文件

    注意事项 如果导出的页面中设计到图片或者其他文件跨域文件,需要后端服务配合 安装依赖 npm install html2Canvas --save npm install jspdf--save 封装 ...

随机推荐

  1. BZOJ_3049_[Usaco2013 Jan]Island Travels _状压DP+BFS

    BZOJ_3049_[Usaco2013 Jan]Island Travels _状压DP+BFS Description Farmer John has taken the cows to a va ...

  2. ES6 模板编译

    顾名思义,就是用反引号编写一个模板字符串, 用echo将模板转为javascrip表达式字符串, 用正则将基础字符串转为想要字符串 将代码封装在函数中返回: 注: 用到es6属性${} var tem ...

  3. Python-Django使用MemcachedCache缓存

    最近工作中使用到缓存,简单记录之... 关于django的几种缓存方式,就不在做介绍了,网上一搜一大把:1.8.2官方文档, Django 缓存,Python菜鸟之路:django缓存 学习了之后,选 ...

  4. windows cmd下如何暂停(挂起)运行中的进程

    在Linux下做开发时,我们都熟知Ctrl+Z的指令,作用就是把当前运行的程序转到后台,暂停执行,等到合适的时候再使用fg指令把这个程序调出来再次执行.这功能也不常用,但有时候还挺必要. 那么wind ...

  5. windows下patch

    经常在网上看到有人发布patch文件来更新他们的开源代码,例如cegui.ogre等都使用这种形式来修bug或者增加一些小功能.但是,我们下载到的patch文件,貌似是linux/unix的diff工 ...

  6. java 发送get,post请求

    package wzh.Http; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...

  7. python 测试用例

    mydict.py代码如下: class Dict(dict): def __init__(self, **kw): super().__init__(**kw) def __getattr__(se ...

  8. bzoj 5498: [2019省队联测]皮配【dp】

    是个神仙dp-- 参考:https://www.luogu.org/blog/xzz-233/solution-p5289 设f[i][j][k]是前i个有限制的城市,所有学校中选蓝色阵营有j人,有限 ...

  9. 高级开发不得不懂的Redis Cluster数据分片机制

    Redis 集群简介 Redis Cluster 是 Redis 的分布式解决方案,在 3.0 版本正式推出,有效地解决了 Redis 分布式方面的需求. Redis Cluster 一般由多个节点组 ...

  10. 黑客攻防技术宝典web实战篇:攻击应用程序逻辑习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 何为强制浏览?可以通过它确定哪些漏洞? 强制浏览包括避开浏览器导航对应用程序功能访问顺序实 ...