Javascript，以编程方式触发Firefox中的文件下载[关闭]

Posted 2023-02-22

【中文标题】Javascript，以编程方式触发Firefox中的文件下载[关闭]

【英文标题】：Javascript, programmatically trigger file download in firefox [closed]

【发布时间】：2012-09-22 12:01:58

【问题描述】：

我希望用户下载内存中的数据 uri。

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

当您单击运行时，它将下载 chrome 中的小图像，而在 FF 中什么也不做。谁能帮我理解为什么它在 FF 中不起作用以及我需要做什么才能使它起作用？

谢谢！

【问题讨论】：

小提琴链接不起作用。为了后代，您可以在问题中发布代码吗？

【参考方案1】：

您正在使用新的 (html5) download attribute。 据我所知，这仅在 Chrome 中受支持，而在 Firefox 中尚不支持。

2018 年 3 月更新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"');

【讨论】：

我正在构建我希望用户能够下载客户端的图像。有什么方法可以让用户下载我在 FF 中拥有 data-uri 的客户端图像？看起来下载属性已经在 chrome 中使用了一年多，所以我不确定 FF 是否有任何计划支持它。

我添加了我的答案以包含仅 javascript 的替代方案。这是你可以使用的东西吗？

不幸的是 location.href 选项意味着文件没有正确的 mime 类型，我无法将默认文件名设置为任何合理的名称，有没有办法解决这个问题？将此标记为答案，因为它非常有帮助。谢谢。

我不知道你是否读过这篇文章，但我能想到的设置 mime 类型和文件名的唯一解决方案（解决方法/hack）是将图像发送回服务器并返回它再次使用正确的标题。

注意：这种方法可能会触发 'beforeunload' 事件

【参考方案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();

原小提琴的变化：

添加电话到document.body.appendChild(a); 将triggerEvent() 更改为a.click()

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

【讨论】：

关键是将它附加到 DOM 以便这种方法在 Firefox 下工作

***.com/a/23873370/5841382 这可能不再起作用了

为什么需要将元素添加到 DOM 中？在 Chrom (96) 上它可以正常工作，而无需