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

Question

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

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

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

谢谢！

Answer 1

您正在使用新的（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=="

替代方案：服务器端

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

PHP示例

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

Answer 2

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