jsPDF未在Edge浏览器上呈现highcharts图像

Question

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

注意：我尝试将图像 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

---