Javascript，以编程方式触发firefox中的文件下载

Question

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

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

当你点击运行时，它将下载chrome中的小图像，并在FF中不执行任何操作。任何人都可以帮助我理解为什么它在FF中不起作用以及我需要做些什么才能使它工作？

谢谢！

Answer 1

我意识到这是一篇旧帖子，但是当我在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/

Answer 2

您正在使用新的（html5）download attribute。 据我所知，这只在Chrome中支持，而在Firefox中不支持。

更新3-2018
almost all major browsers现在支持此功能（无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=="

替代方案：服务器端

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

PHP示例

header('Content-Disposition: attachment; filename="image.png"');