chart js download to png with canvas.toDataURL() not working in IE and firefox

Question

I am using canvas.toDataURL() to download chart.js chart ,it is perfectly working with chrome but not working with IE and Firefox.here is my code

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

Thank you.

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

The anchor tag you are creating also needs to be added to the DOM in Firefox and IE, in order to be recognized for click events.

Answer 2

In Firefox, you need to do the link.click (though you may not want to do that in Chrome as it results in a double download). However, IE (except for the latest versions of Edge) doesn't support the "download" attribute on the a tag, and you need to save the canvas slightly differently.

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

In the Chart.js API documentation there is a built in function called .toBase64Image() which you may wish to use instead, as you've outlined your file extension as being .png.

As Becky stated above, in Firefox, link.click() needs to be used in order for the file to download. However, the element we created ( link ) needs to be appended to the body of your HTML document in order for link.click() to function as required. It is important that once this statement has been executed, to remove the link element from your HTML document, so your HTML body doesn't accumulate these elements every time you try to download a chart. IE requires the canvas to be saved differently through the blob functions.

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