使用JavaScript将当前页面保存成PDF,支持图片和文字的保存
前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个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,支持图片和文字的保存的更多相关文章
- Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF
1.常见用法 using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...
- 利用Microsoft.Office.Interop.Excel 将web页面转成PDF
网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...
- 【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页
1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...
- 在线提取PDF中图片和文字
无需下载软件,你就可以在线提取PDF中图片和文字,http://www.extractpdf.com/不仅可以获取本地PDF文档的图片和文字,还能获取远程PDF文档的图片和文字.如下图所示:结果本人测 ...
- 在线扫描PDF JPG 图片上面文字
在线扫描PDF JPG 图片上面文字
- html页面转换成pdf
一般页面都是.jsp页面,所以要把.jsp转换成html,在生成pdf,在网上找了好多方法,只有用一个插件,wkhtmltopdf-0.8.3.exe,生成的pdf会相对的好看. 先附上我做的.jsp ...
- 利用itext将html页面转成pdf(不模糊)
1.maven项目进入依赖 <dependency> <groupId>org.xhtmlrenderer</groupId> <artifactId> ...
- vue将页面导出成pdf
npm i jspdf-html2canvas prinOut(){ // 导出pdf let page = document.querySelector('.app-main'); // page ...
- Vue 页面导出成PDF文件
注意事项 如果导出的页面中设计到图片或者其他文件跨域文件,需要后端服务配合 安装依赖 npm install html2Canvas --save npm install jspdf--save 封装 ...
随机推荐
- NSString -- UILabel中字体有多种颜色,字符串自动计算高度/换行
一:UILabel中字体有多种颜色 UILabel *label = [[UILabel alloc] init]; label.frame = CGRectMake(, , , ); label.b ...
- python-----删除列表中某个元素的3种方法
python中关于删除list中的某个元素,一般有三种方法:remove.pop.del: 1.remove: 删除单个元素,删除首个符合条件的元素,按值删除举例说明: >>> st ...
- Linux的终端类型
终端是一个很重要的外设,用过终端设备的人都知道如果设备类型不对就会有乱字符,也可用仿真终端软件如netterm试验一下,Linux的终端信息放在 /usr/share/terminfo下,在这个目录的 ...
- 《Eye In-Painting with Exemplar Generative Adversarial Networks》论文阅读笔记
Abstract 基于conditional GAN使用隐藏在reference image中的exemplar information生成high-quality,personalized in-p ...
- 使用FPDF输出中文
① 下载FPDF相关资料=>https://github.com/DCgithub21/cd_FPDF ② 查看目录文件 注:ttf2pt1.zip为字体转换程序 ③ 运行example.ph ...
- B. Arpa’s obvious problem and Mehrdad’s terrible solution
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- ubuntu scp命令或者用root连接ssh提示:Permission denied, please try again.错误
1.su - #!!! 2.vi /etc/ssh/sshd_config 3.PermitRootLogin yes # 找到此字段,改为此行所示 4./etc/init.d/ssh restart ...
- HDU 1270 小希的数表 (暴力枚举+数学)
题意:... 析:我们可以知道,a1+a2=b1,那么我们可以枚举a1,那么a2就有了,并且a1+a3=b2,所以a3就有了,我们再从把里面的剩下的数两两相加,并从b数组中去掉, 那么剩下的最小的就是 ...
- 786. K-th Smallest Prime Fraction
A sorted list A contains 1, plus some number of primes. Then, for every p < q in the list, we co ...
- springboot redis工具类
package com.vv.boot.util; import java.util.List; import java.util.Map; import java.util.Set; import ...