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图表的海图图表时，我也遇到了IE11的类似问题。我们使用了将所有svg图像转换为画布的技术。将新创建的画布放在svg处。现在捕获dom并打印/下载。一旦完成打印/下载，请再次从dom移除画布。它正在开发chrome，FF和IE。我们使用了canvg npm模块将svg转换为ibrahim noureddine答案1中指定的画布

高清图表的html2canvas在IE上运行不正常

2 个答案: