近来遇到个需求，须要把当前页面天生pdf，并下载。弄了几天，本身整顿整顿，记录下来，我以为应该会有人须要 ：）
项目源码地点：https://github.com/linwalker/…
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>
<img src="./Stone.png">
<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
