图表js下载到png，canvas.toDataURL（）无法在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中，您需要执行link.click（尽管您可能不希望在Chrome中执行此操作，因为它会导致双重下载）。但是，IE（Edge的最新版本除外）不支持a标签上的“download”属性，您需要稍微不同地保存画布。

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（）才能下载文件。但是，我们创建的元素（链接）需要附加到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');
}