前端开发的朋友们可能会遇到这个需求：将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个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. [Selenium] Explicit wait 方法

    (1)  new WebDriverWait(driver, 10). until(ExpectedConditions.elementToBeClickable(locator)); (2)  ne ...

  2. ThreadPoolExecutor之二：jdk实现的线程池介绍

    一 简介 线程的使用在java中占有极其重要的地位,在jdk1.4极其之前的jdk版本中,关于线程池的使用是极其简陋的.在jdk1.5之后这一情况有了很大的改观.Jdk1.5之后加入了java.uti ...

  3. B. Simple Molecules

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  4. windows动态磁盘导致的分区问题

    上次说到由于装双系统导致我的win7启动不了了,一直以为是不是在ubuntu的安装界面点错了什么东西导致的,甚至认为是不是server的安装程序有点bug,直到今天继续折腾才发现了问题所在,跟ubun ...

  5. ccflow_003.驰骋流程引擎表单方案

    003.驰骋流程引擎表单方案 设计流程主要有四个步骤 设计成型的效果图 表单的展示效果 表单方案 提供了八种表单模式 内置傻瓜表单 设计好的傻瓜表单演示 运行查看效果 内置自由表单 这是已经设计好的自 ...

  6. PTA 模拟，【放着一定要写哈哈哈哈哈】（据说用string哟）

    实现一种简单原始的文件相似度计算,即以两文件的公共词汇占总词汇的比例来定义相似度.为简化问题,这里不考虑中文(因为分词太难了),只考虑长度不小于3.且不超过10的英文单词,长度超过10的只考虑前10个 ...

  7. bzoj 3365: [Usaco2004 Feb]Distance Statistics 路程统计【容斥原理+点分治】

    统计在一个root下的两个子树,每个子树都和前面的运算一下再加进去对于这种需要排序的运算很麻烦,所以考虑先不去同子树内点对的算出合法点对个数,然后减去每一棵子树内的合法点对(它们实际上是不合法的,相当 ...

  8. Django学习:模板继承和配置静态文件

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  9. C#中，用HashTable,DataTable等复制和克隆浅谈

    如有雷同,不胜荣欣,若转载,请注明 在C#中,用HashTable,DataTable等复制和克隆浅谈,下面直接看例子 HashTable ht = null; ht = new HashTable( ...

  10. PMD - Avoid autogenerated methods to access private fields and methods of inner / outer classes

    PMD错误 Avoid autogenerated methods to access private fields and methods of inner / outer classes 样例 p ...