javascript - jsPDF 未在 Edge 浏览器上渲染 highcharts 图像

Question

我是 jsPDF 新手，我正在尝试下载包含一些 html 内容的 highchart 。我的代码适用于除“Microsoft Edge”之外的所有浏览器。
这是工作Plunker 。我在谷歌上搜索过类似的问题，但没有一个人谈论边缘浏览器，此外，我尝试使用 png 图像而不是 JPEG 像 this但没有运气。

注意:我尝试直接将图像 url 传递给 .addImage() 函数，该函数适用于所有浏览器。

有人可以指出我缺少什么或做错了什么吗？

更新:直到 Edge 版本 20，代码都可以正常工作，问题出在 20 以上的版本上。

Answer 1

我认为该问题与 Edge-Canvas 问题有关。

我使用了 SVG->Blob->Image->Canvas 方法，而不是 SVG->Canvas。

在我的本地 Edge 上，我遇到了您在帖子中提到的问题。我的版本在 Edge 上也运行良好。

这是我所做的:

 $scope.chartWithContentDownload = function() {
        var doc = new jsPDF('portrait', 'pt', 'a4', true);
        var elementHandler = {
            '#ignorePDF' : function(element, renderer) {
                return true;
            }
        };

        var source = document.getElementById("top-content");
        doc.fromHTML(source, 15, 15, {
            'width' : 560,
            'elementHandlers' : elementHandler
        });


        var msie = document.documentMode;

  if (!isNaN(msie) && msie < 12) {
  // code for IE < 12

      var tempSVG = $('#testchart').highcharts().container.innerHTML;
                var canvas11 = document.createElement('canvas');

                canvg(canvas11, tempSVG);
                var dataUrl = canvas11.toDataURL('image/JPEG');

                doc.addImage(dataUrl, 'JPEG', 20, 300, 560, 350);

                var source2 = document.getElementById("bottom-content");
                doc.fromHTML(source2, 15, 650, {
                    'width' : 560,
                    'elementHandlers' : elementHandler
                });

                setTimeout(function() {
                    doc.save('TestChart.pdf');
                }, 2000);

  } else {

    var svg = document.querySelector('svg');
        var width = $('#testchart').find('svg').width();
        var height = $('#testchart').find('svg').height();
        var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var DOMURL = window.URL || window.webkitURL || window;
    var data = (new XMLSerializer()).serializeToString(svg);

    var img = new Image();
    var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    var url = DOMURL.createObjectURL(svgBlob);

    img.onload = function () {
      ctx.canvas.width = width;
      ctx.canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      DOMURL.revokeObjectURL(url);

      var dataUrl = canvas.toDataURL('image/jpeg');
      doc.addImage(dataUrl, 'JPEG', 20, 300, 560, 350);

            var source2 = document.getElementById("bottom-content");
            doc.fromHTML(source2, 15, 650, {
                'width' : 560,
                'elementHandlers' : elementHandler
            });

            setTimeout(function() {
                doc.save('TestChart.pdf');
            }, 2000);
    };

    img.src = url;

}

};

Plunker Link is here

注意:

我只检查了 Chrome 和 Edge。

我的 Edge 版本是:Microsoft Edge 38.14393.0.0

我的 Chrome 版本是:版本 56.0.2924.87

<小时/>

编辑

IE 11 上存在一个关于canvas.toDataUrl() 安全错误的错误。我修复了该错误并更新了代码。现在它检查浏览器并在 IE 11 上表现不同。OP 的原始代码在 IE 11 上运行良好，所以我没有为此做任何新操作，我只是检查客户端浏览器 IE 版本。

Angular 中有一个特殊的属性，使用方式如下:var msie = document.documentMode;。如果浏览器是IE，msie将为NaN。如果是IE，msie是版本号。

来源:https://github.com/angular/angular.js/blob/master/src/Angular.js#L204-L209

<小时/>