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

时间:2012-10-01 15:49:11

标签: javascript firefox google-chrome dom

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

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

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

谢谢!

2 个答案:

答案 0 :(得分:19)

我意识到这是一篇旧帖子,但是当我在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. 的通话
  3. triggerEvent()更改为a.click()
  4. 这是一个更新的小提琴: http://jsfiddle.net/70f91ao7/6/

答案 1 :(得分:6)

您正在使用新的(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"');