最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - Javascript download not working in Firefox and IE - Stack Overflow

programmeradmin0浏览0评论

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

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

Share Improve this question edited Apr 12, 2016 at 23:32 Owais Ahmed asked Apr 12, 2016 at 23:25 Owais AhmedOwais Ahmed 1,4382 gold badges35 silver badges72 bronze badges 16
  • make sure the versions of FF and IE support HTML5 – DinoMyte Commented Apr 12, 2016 at 23:26
  • yup i am using new browsers – Owais Ahmed Commented Apr 12, 2016 at 23:27
  • please post the entire code, a snipet would not help much. – DinoMyte Commented Apr 12, 2016 at 23:28
  • Internet Explorer doesn't support the download attribute (source: caniuse./#feat=download). As for Firefox, it should work but you should provide a pletely reproducible code example. – Jon Koops Commented Apr 12, 2016 at 23:31
  • 2 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 Commented Apr 12, 2016 at 23:49
 |  Show 11 more ments

1 Answer 1

Reset to default 8
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.
发布评论

评论列表(0)

  1. 暂无评论