最近做项目中遇到要把整个页面保存为PDF文件，网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现。实现的过程是 先用html2canvas.js把html页面转成图片，再用jsPdf.js把图片导出为pdf。
于是做了个小案例来测试这个功能。
我要评论<body>
<!-- PDF -->
<div class="bb" id="ctn">
<div class="anliu" id="anliu">生成PDF</div>
</div>
</body>
<script src="../../Scripts/aps/html2canvas.js"></script>
<script src="../../Scripts/aps/jsPdf.debug.js"></script>
js写法
window.onload =function(){
var downPdf = document.getElementById("anliu");
downPdf.onclick = function() {
html2canvas(document.body, {
onrendered: function(canvas) {
//返回图片URL，参数：图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4');
//需要dataUrl格式
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
pdf.save('tup.pdf');
}
});
}
}
1，写完一测试看，报了个错误Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported。 于是我换一种方法，把所有图片删掉测试，再点击生成pdf，结果是没问题，这样看来报错的原因是图片引起的。
一查资料是因为图片和页面所在域不同，出现跨域传输的问题，说白了就是要在服务器环境下访问。于是在服务器环境下测试没问题，成功生成pdf文件。
2，html2canvas.js截图不全的问题
把这个测试实现的功能放到项目里面去，遇到了一个新问题，生成的pdf只有页面窗口可见的区域，有滚动条的下面没有生成出来。
于是又找了一下，html2canvas 截取图片不支持高度，会造成只可以截到浏览器可见的，如果出现滚动条则不会截全，所以造成jsPdf.js根据截图生成的pdf出现不全的问题。既然是html2canvas截图的原因引起的那就从这里来解决。
网上看了下别人写的案例，结合自己测试+分析发现，如果截取是body的这个层级，而刚好body设置了overflow: hidden;那超出的部分是永远截取不到的，因为这个节点的dom高就是窗口可见的高度，并不包含滚动条多出来的部分。
于是我把滚动条这一节点的样式，height: auto;让高度给子元素去撑开。 再往上把父节点都去掉overflow: hidden;去掉元素不可见。
看一下引入jquery后，在项目中重新写的js
var pdfcc = $('.pdf-cc');
pdfcc.on('click', function (event) {
html2canvas($("#bb-pdf-ctn"), {
allowTaint: true,
height: $("#bb-pdf-ctn").outerHeight(),
onrendered: function (canvas) {
//返回图片URL，参数：图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4');
//需要dataUrl格式
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
pdf.save('pdf.pdf');
}
});
});
3，html2canvas设置了2个新的参数
允许跨域：allowTaint: true,
设置高度：height: $("#bb-pdf-ctn").outerHeight(),
高度就是滚动条这个节点的高度。
OK，就这样搞定滚动条区域截图不全的问题了。
如对本文有疑问， 点击进行留言回复！！
【 Node.js 进阶】你应该知道的 NPM 知识都在这！
人人商城怎么打包生成app？实操方法教程完美实现微信&支付宝支付分享第三方登陆等功能
网友评论