12

我在内存中有一个希望用户下载的数据 uri。

这个小提琴适用于 chrome 但不适用于 FF：http: //jsfiddle.net/6W2TY/

当您单击运行时，它将下载 chrome 中的小图像，而在 FF 中什么也不做。谁能帮我理解为什么它在 FF 中不起作用以及我需要做什么才能使它起作用？

谢谢！

4

2 回答 2

31

我意识到这是一篇旧帖子，但是当我在 FF 中下载文件时遇到类似问题时遇到了它。在编写问题时，这可能在 FF 中不起作用，但现在可以。

a = document.createElement('a');
document.body.appendChild(a);
a.download = name;
a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg==";
a.click();

与原始小提琴的更改：

  1. 添加呼叫到document.body.appendChild(a);
  2. 更改triggerEvent()为a.click()

这是一个更新的小提琴：http: //jsfiddle.net/70f91ao7/6/

于 2014-12-03T20:04:11.527 回答
10

您正在使用新的 (html5)下载属性。据我所知，这仅在 Chrome 中受支持，在 Firefox 中（尚不）受支持。

更新 3-2018现在几乎所有主要浏览器都
支持此功能（不支持 IE）。

替代方案：使用 location.href

另一种强制下载的方法是将用户重定向到图像，如下所示：

// generate the image
var img = ""

// then call a function maybe onClick or something
downloadImage(img);

function downloadImage(data) {
    location.href = "data:application/octet-stream;base64," + data;
}

或短版

location.href = "data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="

替代方案：服务器端

作为替代方案，如果您正在处理图像服务器端，您可以通过设置 content-disposition 标头来强制下载。

PHP 示例

header('Content-Disposition: attachment; filename="image.png"');
于 2012-10-01T16:03:09.187 回答