问题直接看 第三点

一、html2canvas

一个项目使用 html2canvas 转成图片没啥问题,起初使用的代码如下:

    function html2Peport(){
        // 获取 dom 对象
        var obj = $("#report-cs-box");
        // 创建新的canvas
        var canvas2 = document.createElement("canvas");
        var _canvas = obj[0];
        var w = parseInt(window.getComputedStyle(_canvas).width);
        var h = parseInt(window.getComputedStyle(_canvas).height);
        //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
        canvas2.width = w * 2;
        canvas2.height = h * 2;
        canvas2.style.width = w + "px";
        canvas2.style.height = h + "px";
        //  对context的参数修改,translate指的是偏移量
        //  var context = canvas.getContext("2d");
        //  context.translate(0,0);
        var context = canvas2.getContext("2d");
        context.scale(2,2);
        $(".cs-data-json-view").show();
        html2canvas(obj[0], {
            canvas:canvas2,
            onrendered: function(canvas) {
                // 处理业务逻辑 如图片下载或者显示等内容
            }
        }
    }

将 html 转 canvas 之后没什么问题。

二、加入 jspdf

之后需要再生成 pdf 格式的文件,因此引入了 jspdf。

jspdf 代码简单,而且没有使用 html2canvas 生成的图片,直接是通过 addHTML 来保存的:

    function createPdf(imageData) {
        var doc = new jsPDF('landscape', 'pt','a4');
        var obj = $("#report-cs-box");
        doc.internal.scaleFactor = 1;
        var options = {
            pagesplit: true
        };
        doc.addHTML(obj[0],options,function() {
            doc.save('test.pdf');
        });
    }

三、两者引入顺序问题及解决

单独使用 html2canvasjspdf,但是放在一个页面之后,发现 html2canvas 无法截完整的 DOM 图。

查了很久也没发现什么问题。

最后,我感觉会不会引入顺序的问题导致的,最开始我的引入顺序如下:

  • html2canvas.min.js
  • jspdf.min.js

后面我更换了一下,新的引入顺序:

  • jspdf.min.js
  • html2canvas.min.js

然后发现 竟然没问题了!!!!