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

更新日期: 2018-03-20阅读: 6k标签: pdf

最近做项目中遇到要把整个页面保存为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

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

pdf.js是一款开源的pdf文档读取解析插件,据说在HTML5下诞生的,对于主流的浏览器基本都支持。pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析。

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

因此与原始的 React 页面相比,PDF 中应该有不同的样式和额外的内容。由于这个任务比用简单的 CSS 规则解决要复杂得多,所以我们先探讨了可能的实现方法。我们找到了 3 个主要解决方案。这篇博文将指导你了解它们的可能性并最终实施。

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

本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法。到PDFJS官网下载pdfjs插件包,注意下载Stable稳定版的包。将下载的压缩包解压并放入项目中。在 iframe 标签中使用。

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

我们通常下载文件的方式无非后端给一个生成文件链接, 前端通过a标签或者iframe的方式去下载,这种方式的弊端是无法监测到文件是否下载完成,无法给用户友好的提示,以避免用户短时间内重复点击下载.

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

最近接到产品需求,用户需要在我们的站点上在线查看 PDF 文件,并且查看时,用户可以对 PDF 文件的进行旋转、缩放、跳转到指定页码等操作。这个太简单了,随便找找就一堆轮子。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!