html2canvas+jspdf导出pdf,解决导出PDF不全的问题

前端目前网上可以查到的主要方案就是,用html2cavans先将页面在canvas中绘制,然后canvas转图片资源,再用jspdf将图片转PDF;

这种方式的优点就是解决了jspdf直接转pdf时,一些图片和页面中canvas区域空白的问题;但是也存在一个问题就是直接导出可视区域,页面有滚动条的情况下,滚动条以下丢失,网上查到的解决方法有两种,但是对我的不生效;偶然调试的时候用了一种奇怪的方式解决了问题;
先说网上的解决方法,
1.用jquery的clone()方法,复制新的dom插入到body中,canvas渲染复制的dom,转图片再转pdf.能解决截图不全的问题,但是对页面本身中有canvas的部分复制出来的还是空白。
2.CNDS上有大神直接改了html2canvas源代码,说可以解决问题,但是是3年前的代码了,看了最新更新的html2canvas源码似乎没找到大神当初改的地方。

下面说重点

解决问题的这种怪异方法,有两个修改点,一个是创建一个与要导出PDF相同大小的div插入到body中,再调用html2canvas的方法,另一个点是在html2canvas的配置中给canvas设置高度。导出成功删除插入的元素。
要注意一个地方,就是要导出pdf的元素一定要有高度,百分比的高度和auto肯定会出问题,只要是html2canvas对一些css还支持不全;

贴上代码

<script src="./static/html2canvas.min.js"></script>
<script src="./static/jspdf.debug.js"></script>
...
...
...
exportPDF(){
        let targetDom = $("#content");
        // let copyDom = targetDom.clone();
        let copyDom = $("<div/>");
        copyDom.addClass('super');
        copyDom.width(targetDom.width() + "px");
        copyDom.height(targetDom.height() + "px");
        $('body').append(copyDom);
        let cont=document.getElementById('content');
        console.log(targetDom);
        html2canvas(targetDom, {
          // windowHeight:2000,
          height:cont.offsetHeight,//给canvas设置高度,
          onrendered: function(canvas) {
            console.log('回调开始');
            //通过html2canvas将html渲染成canvas,然后获取图片数据
            let imgData = canvas.toDataURL('image/jpeg',1.0);
            // console.log(imgData);
            console.log(canvas.width,canvas.height);
            //初始化pdf,设置相应格式
            let doc = new jsPDF("p", "mm", "a4");
            // let doc = new jsPDF('', 'pt', 'a4')

            //这里设置的是a4纸张尺寸
            doc.addImage(imgData, 'JPEG', 0, 0,210,297);

            //输出保存命名为content的pdf
            doc.save('report.pdf');
          //移除dom中添加的元素
            $('.super').remove();

          }
        });
      },

#########如果各位还有什么好方法,欢迎回复

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,544评论 25 708
  • 谈到古时候的书院,不少人会感到好奇,那是什么?图书馆吗?其实,书院是封建社会后期一种重要的教育机构。书院也分为两...
    萌萌哒爱笑菇凉阅读 276评论 2 1
  • 秋,如期而至 君,过时未归 寒风瑟瑟,细雨飘零 红叶随风舞 倚门而忘庭前落花 思君情切切 泪目渐朦胧 原是雾中花?...
    伽蓝x阅读 722评论 11 20
  • 今天跟忙完毕设的学长们吃饭,嬉笑中发现每个人都有太多遗憾,感触最深的是: “这些事情要是早知道就好了,只可惜当时没...
    少年叶安阅读 856评论 7 31