Javascript 下载在 Firefox 和 IE 中不工作

Question

我正在下载图片。它仅适用于 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

非常感谢您的帮助。谢谢

Answer 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 添加到 link 元素。这确保显示图像，即使浏览器不支持 download 属性。
它将 link 添加到文档中，以便 .click() 在 Firefox 中实际工作，然后将其删除。

Javascript 下载在 Firefox 和 IE 中不工作

Javascript download not working in Firefox and IE

html

javascript

canvas

todataurl