图表js使用canvas.toDataURL（）下载到png不能在IE和Firefox中使用

Question

我正在使用canvas.toDataURL（）下载chart.js图表​​，它与chrome完全兼容，但不适用于IE和Firefox。这是我的代码

 var link = document.createElement('a');
  var canvas = document.getElementById('canvasId');
link.href = canvas.toDataURL("image/png");
link.download = 'IMAGE.png';
link.click();

谢谢。

Answer 1

 var canvas = document.getElementById('canvasId');
 if(canvas.msToBlob){
     var blob = canvas.msToBlob();
     window.navigator.msSaveBlob(blob, 'image.png');
 }
 else{
       var link = document.createElement('a');
       link.href = canvas.toDataURL("image/png");
       link.download = 'IMAGE.png';
       document.body.append(link);
       link.click();
   }

您还需要将正在创建的定位标记添加到Firefox和IE中的DOM中，以便识别点击事件。

Answer 2

在Firefox中，您需要执行链接。单击（尽管您可能不想在Chrome中执行此操作，因为它会导致重复下载）。但是，IE（最新版本的Edge除外）不支持a标签上的“下载”属性，因此您需要稍微不同地保存画布。

var canvas = document.getElementById('canvasId');
var isIE = !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
if (!isIE) {
    let image = canvas.toDataURL("image/jpeg", 1.0);

    // we are getting the a tag to add the 'download' attribute and the file contents
    let downloadLink = document.getElementById("download");
    downloadLink.setAttribute("download", downloadFileName);
    downloadLink.setAttribute("href", image);

    // For some reason, we need to click the button again in firefox for the download to happen
    if (navigator.userAgent.match(/Firefox/g)) {
        downloadLink.click();
    }
}

if (isIE) {
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob, downloadFileName);
}

Answer 3

在Chart.js API文档中，有一个内置函数.toBase64Image（），您可能希望使用它，因为您将文件扩展名概述为.png。

如Becky所述，在Firefox中，需要使用 link.click（）来下载文件。但是，我们创建的元素（ link ）需要附加到HTML文档的正文中，以使 link.click（）能够按需运行。重要的是，一旦执行了该语句，就必须从HTML文档中删除链接元素，这样，每次尝试下载图表时，HTML主体就不会累积这些元素。 IE要求通过blob函数以不同的方式保存画布。

let canvas = document.getElementById('canvasId');
let chart_name = = new Chart(canvas, config);

var isIE = !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);

if (!isIE) {

  // Create a hyperlink element.
  let link = document.createElement('a');

  // Set image URL and filename.
  link.href = chart_name.toBase64Image();
  link.download = 'IMAGE.png';

  // If browser is Firefox, the element we created above must be appended to the
  // body of the HTML document & therefore removed after.
  if (navigator.userAgent.match(/Firefox/g)) {
      document.body.append(link);  
      link.click();
      document.body.removeChild(link);
  }
}

if (isIE) {
  var blob = canvas.msToBlob();
  window.navigator.msSaveBlob(blob, 'IMAGE.png');
}