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)下载属性.据我所知,这仅在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"');