欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-10 08:12:49
最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现。实现的过程是 先用html2canvas.js把html页面转成图片,再用jsPdf.js把图片导出为pdf。 于是做了个小案例来测试这个功能。 js写法 1,写完一测试 ......

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