Javascript download not working in Firefox and IE

Question

I am downloading the image. It is only working in Chrome not in Firefox or IE.

        var a = document.createElement('a');
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'Post-ITIE.jpg';
        a.click()

Can anyone help me how can it be working for all browsers.

JsFiddle example

Help would be highly appreciated. Thanks

Internet Explorer doesn't support the `download` attribute (source: http://caniuse.com/#feat=download). As for Firefox, it should work but you should provide a completely reproducible code example. — Jon Koops, Apr 12 '16 at 23:31
@DinoMyte check the JsFiddle example. http://jsfiddle.net/sodofkcs/52/ — Owais Ahmed, Apr 12 '16 at 23:31
@DinoMyte i have 45.0.2 and it is just taking a screenshot not downloading — Owais Ahmed, Apr 12 '16 at 23:34
Maybe if you set `target="blank"` on the link. That should open the link in a new window in browsers that do not support the `download` attribute. Less than ideal, but it beats needing a server. — Jon Koops, Apr 12 '16 at 23:40
ok i sort out how to work in IE. It uses msSaveBlob to download elements but the firefox should work with my code but its not working. Is it working for you? — Owais Ahmed, Apr 12 '16 at 23:41
@DinoMyte It doesn't download the file in Firefox here. However if I add the link to the DOM before triggering the click it does download the file like expected. — Jon Koops, Apr 12 '16 at 23:41
@JonKoops i added a.setAttribute('target', '_blank'); but it does not work — Owais Ahmed, Apr 12 '16 at 23:44
its working in IE and for that i added window.navigator.msSaveBlob(blob, 'Post-IT.jpg'); but it is not working in firefox — Owais Ahmed, Apr 12 '16 at 23:46
Obviously that doesn't work in Firefox, since it is proprietary method that only works in Internet Explorer. You can fix the issue in Firefox by appending the link to the document body and triggering click afterwards. I'll make a code example to answer your question. — Jon Koops, Apr 12 '16 at 23:49

Jon Koops · Accepted Answer · 2017-05-05T15:42:58.667

var fileName = 'Post-ITIE.jpg';

if ('msToBlob' in canvas) { // IE10+
  var blob = canvas.msToBlob();
  navigator.msSaveBlob(blob, fileName);
} else {
  var a = document.createElement('a');
  a.setAttribute('href', canvas.toDataURL());
  a.setAttribute('target', '_blank');
  a.setAttribute('download', fileName);
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

It does a couple of thing differently than the code originally provided:

It checks if the msToBlob method is present to support downloading the file in Internet Explorer.
It adds a target=blank to the link element. This makes sure that the image is displayed, even if the browser doesn't support the download attribute.
It adds the link to the document so that the .click() actually works in Firefox and removes it afterwards.

Javascript download not working in Firefox and IE

1 Answers1