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的錯誤？藍鳥問題？任何解決方法？

謝謝你，

來源

2017-09-22 ibrahim noureddine

爲我們提供完整的工作示例發生此問題。謝謝。 –

問題是發送給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);

來源

2017-09-26 13:33:10

Highcharts圖表的html2canvas在IE上無法正常工作

回答

相關問題