Highcharts 图表的 html2canvas 在 IE 上无法正常工作

Question

我正在尝试导出 Highcharts 图表并在 js 中将其作为电子邮件发送。为此，我使用了 html2canvas 库，然后将其添加到 jspdf 对象中。在 chrome 和 Firefox 上一切正常，但是在 IE 上执行此操作时出现一个空的 pdf。一个伪代码：

 var
    form = $('#main-content'),
    cache_width = form.width(),
    a4 = [100, 100]; 
    var canvas1 = html2canvas(form, {
        imageTimeout: 6000,
        removeContainer: true
    });
    canvas1.then(function (canvas) {

        var
        img1 = canvas.toDataURL("image/JPEG", 1.0);

        doc.addImage(img1, 'PNG', 0, 50, 440, 300);

    });



    Promise.all([canvas1]).then(function () {

        var pdfString = window.btoa(doc.output());
        var ob = {};
        ob.mail = mailsList;
        ob.title = title;
        ob.pdf = pdfString;

        $.ajax({
            type: 'POST',
            url: "/Charts/SendChart_ByEmail",
            data: JSON.stringify(ob)
        });

因为 IE 不支持 promises 我使用了外部库 (bluebird.js) 但是当渲染包含图表的 div 时，结果 pdf 是空的，但是我试图渲染另一个 div 不包含有效的图表。

这是 Highcharts 的错误吗？蓝鸟问题？任何解决方法？

谢谢，

Answer 1

问题是，如果 div 包含 SVG ，canvas.todatauri 将无法在 IE 上运行。所以我使用 canvasg.. 将上面的代码替换为：

 var chart = $('#main-content').highcharts();
        var svg = chart.getSVG({
            exporting: {
                sourceWidth: chart.chartWidth,
                sourceHeight: chart.chartHeight
            }
        });
        var mycanvas = document.createElement('canvas');
        canvg(mycanvas, svg);
        var imgtest = mycanvas.toDataURL("image/JPEG");
        doc.addImage(mycanvas.toDataURL("image/JPEG"), 'PNG', 0, 50, 440, 300);

Answer 2

我在捕获生成 svg 图表的 highchart 图表时遇到了与 IE11 类似的问题。我们使用了将所有 svg 图像转换为 canvas 的技术。将新创建的 canvas 放在 svg 中。现在捕获 dom 和 print/download 吧。 print/download 完成后，再次从 dom 中删除 canvas。它在 chrome、FF 和 IE 上工作。我们使用 canvg npm 模块将 svg 转换为 canvas，如 ibrahim noureddine

的答案 1 中所指定

Highcharts 图表的 html2canvas 在 IE 上无法正常工作

html2canvas of a Highcharts chart not working fine on IE

javascript

highcharts

html5-canvas

html2canvas

jspdf