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，就这样搞定滚动条区域截图不全的问题了。

来源：https://www.cnblogs.com/yizhilin/archive/2018/03/19/8603879.html

链接: https://www.fly63.com/article/detial/525

js实现html转pdf+html2canvas.js截图不全的问题

怎么使用pdf.js，html5在浏览器直接打开pdf文档

把HTML转成PDF的4个方案及实现

使用pdfjs插件在线预览PDF文件

前端通过ajax获取base64转blob下载PDF方法

如何实现高性能的在线 PDF 预览