Question

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

注意：我已经尝试将图片网址直接传递给.addImage（）函数，该函数适用于所有浏览器。

有人可以指点我，我错过了什么或做错了什么？

更新：Till Edge版本20代码工作正常，问题在于20个版本。

Answer 1

我想这个问题与Edge-Canvas问题有关。

而不是SVG-＆gt; Canvas，我使用了SVG-＆gt; Blob-＆gt; Image-＆gt; 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。

My Edge版本为： Microsoft Edge 38.14393.0.0

我的Chrome版本为：版本56.0.2924.87

修改

IE 11上有一个关于 canvas.toDataUrl（）安全错误的错误。我修复了它并更新了代码。现在它检查浏览器并在IE 11上表现不同.OP的原始代码在IE 11上运行良好，所以我没有做任何新的事情，我只是检查客户端浏览器的IE版本。 / p>
Angular中有一个特殊属性，使用如下：var msie = document.documentMode;。如果浏览器是IE，msie将是NaN。如果是IE，则msie是版本号。

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

jsPDF无法在Edge浏览器

1 个答案: