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

问题描述：

我想导出一个Highcharts图表并将其作为电子邮件发送给js。为此，我使用了html2canvas库，然后将其添加到jspdf对象。在Chrome和Firefox上一切运行良好，但在IE上执行此操作时出现空的PDF。伪码：Highcharts图表的html2canvas在IE上无法正常工作

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不支持许我使用的外部库（bluebird.js），但呈现包含在图表div时，结果PDF是空的，但是我试图呈现另一div不包含它工作的图表。

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

谢谢你，

为我们提供完整的工作示例发生此问题。谢谢。 –

问题是发送给ajax请求的pdf字符串，当在IE上工作时，pdf字符串长度为20Kb，但是在chrome上工作时字符串长度大约为300kb;我认为这导致一个空的PDF，因为图表没有完全导出到画布。 @d_paul –

问题来自canvas.todatauri，生成的图像是不包含图表的空白div –

答

的问题是，如果该div包含SVG canvas.todatauri不能在IE浏览器。所以我用帆布..取代上面的代码：

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);

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

相关推荐