Javascript 下载在 Firefox 和 IE 中不起作用答案

【问题标题】：Javascript download not working in Firefox and IEJavascript 下载在 Firefox 和 IE 中不起作用
【发布时间】：2016-08-03 19:24:08
【问题描述】：

我正在下载图片。它仅适用于 Chrome，不适用于 Firefox 或 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()

任何人都可以帮助我它如何适用于所有浏览器。

JsFiddle example

我们将不胜感激。谢谢

【问题讨论】：

确保FF和IE版本支持HTML5
是的，我正在使用新浏览器
请贴出完整的代码，一个片段不会有太大帮助。
Internet Explorer 不支持download 属性（来源：caniuse.com/#feat=download）。至于 Firefox，它应该可以工作，但您应该提供一个完全可重现的代码示例。
显然这在 Firefox 中不起作用，因为它是仅适用于 Internet Explorer 的专有方法。您可以通过将链接附加到文档正文并随后触发单击来解决 Firefox 中的问题。我会做一个代码示例来回答你的问题。

标签： javascript html canvas todataurl

【解决方案1】：

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

它的作用与最初提供的代码不同：

它检查是否存在 msToBlob 方法以支持在 Internet Explorer 中下载文件。
它将target=blank 添加到链接元素。即使浏览器不支持download 属性，这也可以确保显示图像。
它将链接添加到文档，以便 .click() 在 Firefox 中实际工作，然后将其删除。

【讨论】：