js实现html转pdf+html2canvas.js截图不全的问题
最近做项目中遇到要把整个页面保存为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，就这样搞定滚动条区域截图不全的问题了。
