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

【问题标题】：html2canvas of a Highcharts chart not working fine on IEHighcharts 图表的 html2canvas 在 IE 上无法正常工作
【发布时间】：2018-03-04 02:41:23
【问题描述】：

我正在尝试导出 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 错误吗？蓝鸟问题？任何解决方法？

谢谢你，

【问题讨论】：

为我们提供发生此问题的完整工作示例。谢谢。
问题是发送到 ajax 请求的 pdf 字符串，在 IE 上工作时，pdf 字符串的长度为 20 Kb，但是在 chrome 上工作时，字符串长度约为 300kb；我认为这导致了一个空的pdf，因为图表没有完全导出到画布上。 @d_paul
问题来自 canvas.todatauri ，生成的图像是不包含图表的空 div

标签： javascript highcharts html5-canvas jspdf html2canvas

【解决方案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);

【讨论】：

【解决方案2】：

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

【讨论】：