Javascript将html转成pdf,下载(html2canvas 和 jsPDF)
最近碰到个需求,需要把当前页面生成pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)
项目源码地址:https://github.com/linwalker/render-html-to-pdf
html2canvas
简介
我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图,而是通过遍历页面DOM结构,收集所有元素信息及相应样式,渲染出canvas image。
由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览器生成,使用很方便。
使用
使用的API也很简洁,下面代码可以将某个元素渲染成canvas:
html2canvas(element, {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
}
});
通过onrendered方法,可以将生成的canvas进行回调,比如插入到页面中:
html2canvas(element, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
做个小例子代码如下,在线展示链接demo1
<html>
<head>
<title>html2canvas example</title>
<style type="text/css">...</style>
</head>
<body>
<header>
<nav>
<ul>
<li>one</li>
...
</ul>
</nav>
</header>
<section>
<aside>
<h3>it is a title</h3>
<a href="">Stone Giant</a>
...
</aside>
<article>

<h2>Stone Giant</h2>
<p>Coming ... </p>
<p>以一团石头...</p>
</article>
</section>
<footer>write by linwalker @2017</footer>
<script type="text/javascript" src="./html2canvas.js"></script>
<script type="text/javascript">
html2canvas(document.body, {
onrendered:function(canvas) {
document.body.appendChild(canvas)
}
})
</script>
</body>
</html>
这个例子将页面body中的元素渲染成canvas,并插入到body中
jsPDF
jsPDF库可以用于浏览器端生成PDF。
文字生成PDF
使用方法如下:
// 默认a4大小,竖直方向,mm单位的PDF
var doc = new jsPDF();
// 添加文本‘Download PDF’
doc.text('Download PDF!', 10, 10);
doc.save('a4.pdf');
在线演示demo2
图片生成PDF
使用方法如下:
// 三个参数,第一个方向,第二个单位,第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 115])
// 将图片转化为dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;
doc.addImage(imageData, 'PNG', 0, 0, 205, 115);
doc.save('a4.pdf');
在线演示demo3
文字与图片生成PDF
// 三个参数,第一个方向,第二个尺寸,第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 155])
// 将图片转化为dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;
//设置字体大小
doc.setFontSize(20);
//10,20这两参数控制文字距离左边,与上边的距离
doc.text('Stone', 10, 20);
// 0, 40, 控制文字距离左边,与上边的距离
doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
doc.save('a4.pdf')
在线演示demo4
生成pdf需要把转化的元素添加到jsPDF实例中,也有添加html的功能,但某些元素无法生成在pdf中,因此可以使用html2canvas + jsPDF的方式将页面转成pdf。通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。
html2canvas + jsPDF
单页
将demo1的例子修改下:
<script type="text/javascript" src="./js/jsPdf.debug.js"></script>
<script type="text/javascript">
var downPdf = document.getElementById("renderPdf");
downPdf.onclick = function() {
html2canvas(document.body, {
onrendered:function(canvas) {
//返回图片dataURL,参数:图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直,尺寸ponits,格式a4[595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4');
//addImage后两个参数控制添加图片的尺寸,此处将页面高度按照a4纸宽高比列进行压缩
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
pdf.save('stone.pdf');
}
})
}
</script>
在线演示demo5
如果页面内容根据a4比例转化后高度超过a4纸高度呢,生成的pdf会怎么样?会分页吗?
你可以试试,验证一下自己的想法: demo6
jsPDF提供了一个很有用的API,addPage()
,我们可以通过pdf.addPage()
,来添加一页pdf,然后通过pdf.addImage(...)
,将图片赋予这页pdf来显示。
那么我们如何确定哪里分页?
这个问题好回答,我们可以设置一个pageHeight
,超过这个高度的内容放入下一页pdf。
来捋一下思路,将html页面内容生成canvas图片,通过addImage
将第一页图片添加到pdf中,超过一页内容,通过addPage()
添加pdf页数,然后再通过addImage
将下一页图片添加到pdf中。
嗯~,很好!巴特,难道没有发现问题吗?
这个方法实现的前提是 — — 我们能根据pageHeight
先将整页内容生成的canvas图片分割成对应的小图片,然后一个萝卜一个坑,一页一页addImage
进去。
What? 想一想我们的canvas是肿么来的,不用拉上去,直接看下面:
html2canvas(document.body, {
onrendered:function(canvas) {
//it is here we handle the canvas
}
})
这里的body
就是要生成canvas的元素对象,一个元素生成一个canvas;那么我们需要一页一页的canvas,也就是说。。。
你觉得可能吗? 我觉得不太现实,按这思路要获取页面上不同位置的DOM元素,然后通过htnl2canvas(element,option)
来处理,先不说能不能刚好在每个pageHeight
的位置刚好找到一个DOM元素,就算找到了,这样做累不累。
累的话
:)可以看看下面这种方法
多页
我提供的思路是我们只生成一个canvas,对就一个,转化元素就是你要转成pdf内容的母元素,在这篇demo里就是body
了;其他不变,也是超过一页内容就addPage
,然后addImage
,只不过这里添加的是同一个canvas。
当然这样做只会出现多页重复的pdf,那到底怎么实现正确分页显示。其实主要利用了jsPDF的两点:
- 超过jsPDF实例格式尺寸的内容不显示
(var pdf = new jsPDF('', 'pt', 'a4'); demo中就是a4纸的尺寸)
- addImage有两个参数可以控制图片在pdf中的位置
虽然每一页pdf上显示的图片是相同的,但我们通过调整图片的位置,产生了分页的错觉。以第二页为例,将竖直方向上的偏移设置为-841.89
即一张a4纸的高度,又因为超过a4纸高度范围的图片不显示,所以第二页显示了图片竖直方向上[841.89,1682.78]范围内的内容,这就得到了分页的效果,以此类推。
还是看代码吧:
html2canvas(document.body, {
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('content.pdf');
}
})
在线演示demo7
两边留边距
修改imgWidth,并且在addImage时x方向参数设置你要的边距,具体代码如下
var imgWidth = 555.28;
var imgHeight = 555.28/contentWidth * contentHeight;
...
pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
...
pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight);
在线演示demo8
作者:linwalker
链接:https://www.jianshu.com/p/570c84ee2e8d
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Javascript将html转成pdf,下载(html2canvas 和 jsPDF)的更多相关文章
- 老菜鸟学习:Javascript 将html转成pdf
起因:处理某个项目,需要把页面上的数据(订单.运单)等导出pdf. 第一个想法:从 Java 层去想.但是经过各种资料查询和实践,第一个想法宣告放弃: 幸好客户的要求是:导出的 pdf 尺寸要和打印的 ...
- html转成pdf 下载,支持后台保存
最近有个需求,需要将html转换成pdf并支持下载 1.需要两个js库 下载 提取码: vab7 <script type="text/javascript" src=&qu ...
- html转成pdf,下载(html2canvas 和 jsPDF)
参考链接:https://github.com/linwalker/render-html-to-pdf
- Javascript/CSS/HTML/vue/angularJS/react/jquery/DOM前端编程经典电子书pdf下载
高级进阶必读 你所不知道的系列,高级开发必掌握. JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理 ...
- Javascript 将 HTML 页面生成 PDF 并下载
最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) html2canvas 简介 我们可以直接在浏览器端使用html2canvas,对整个 ...
- 【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页
1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...
- 使用JavaScript将当前页面保存成PDF,支持图片和文字的保存
前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件.如果采用屏幕截图的话,默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容. ...
- vue将网页中的特定部分转成pdf并下载(仅供个人学习记录)
先安装支持 将页面html转换成图片npm install --save html2canvas 将图片生成pdfnpm install jspdf --save 组件引用: import html2 ...
- 【推荐分享】大量JavaScript/jQuery电子书籍教程pdf合集下载
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
随机推荐
- 用Telnet测试服务器的端口是否开通
可以用telnet测试远程服务器的端口是否开通,格式如下: telnet <server name> <port number> 例如: Telnet tserv 3389 ...
- windows server 2012 st 版本的php环境问题修复 与删除
windows server 2012 st 版本的php环境问题修复 错误内容 HTTP 错误 500.0 - Internal Server Error C:\Program Files\iis ...
- OSError: Could not find library geos_c or load any of its variants ['libgeos_c.so.1', 'libgeos_c.so
OSError: Could not find library geos_c or load any of its variants ['libgeos_c.so.1', 'libgeos_c.so ...
- ORACLE 执行计划
有关oracle 执行计划几个不错的连接 执行计划的一些概念介绍:http://database.51cto.com/art/200611/34273.htm执行计划的例子:http://www.or ...
- CAD VC++安装失败 1603错误
问题描述 想安装一个高版本的CAD来着,可安装报错始终报错1603.具体表现为 DESKTOP-F7K8C37 Installing Microsoft Visual C++ 2008 SP1 ...
- jQuery动画animate方法使用介绍
用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...
- Linux中使用pwconv实现passwd中密码到shadow
1.功能说明:开启用户的投影密码. 2.语 法:pwconv 3.个人理解:就是将/etc/passwd里的密码用x代替,并将真实密码(当然是加密后的)转移到/etc/shadow里面. 4.补充说明 ...
- SQL Server排序规则不一致 - Collate Database_Default
http://www.cnblogs.com/chencidi/archive/2014/07/02/3820386.html 使用多库查询时会出现排序规则冲突的问题 解决办法 在字段后面添加Coll ...
- tempermonkey相关
@match不支持参数和端口配置,瞬间软了
- 算法笔记_213:第七届蓝桥杯软件类决赛部分真题(Java语言C组)
目录 1 平方末尾 2 七星填数 3 打印数字 4 赢球票 前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 平方末尾 平方末尾 能够表示为某个整数的平方的数字称为“平方数” 比如,25,64 虽然无 ...