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

Javascript, programmatically trigger file download in firefox

提问by asutherland

I have a data uri in memory that I would like the user to download.

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

This fiddle works in chrome but not FF: http://jsfiddle.net/6W2TY/

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

When you click run it will download the tiny image in chrome and do nothing in FF. Can anyone help me understand why it doesn't work in FF and what I need to do to make it work?

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

Thanks!

谢谢！

采纳答案by Bart

You are using the new (html5) download attribute. As far as I know this is only supported in Chrome and not (yet) in Firefox.

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

Update 3-2018
This feature is now supported in almost all major browsers(No IE support).

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

Alternative: Using location.href

替代方法：使用 location.href

Another way to force a download is to redirect the user to the image like this:

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

// 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;
}

Or the short version

或者短版

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

Alternative: Server Side

替代方案：服务器端

As an alternative, if you are processing the image serverside you can force a download by setting the content-disposition header.

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

PHP Example

PHP 示例

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

回答by John Myczek

I realize this is an old post, but I came across it when I had a similar problem downloading files in FF. This may not have worked in FF at the time the question was written, but it does now.

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

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

Changes from the original fiddle:

原始小提琴的变化：

1. Add call to document.body.appendChild(a);
2. Change triggerEvent()to a.click()

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

Here is an updated fiddle: http://jsfiddle.net/70f91ao7/6/

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