Blob createObjectURL 下载在 Firefox 中不起作用（但在调试时起作用）答案

【问题标题】：Blob createObjectURL download not working in Firefox (but works when debugging)Blob createObjectURL 下载在 Firefox 中不起作用（但在调试时起作用）
【发布时间】：2018-06-07 21:37:21
【问题描述】：

我有一个奇怪的问题，下面的函数是我根据我在网上找到的关于在客户端中动态创建 Blob 的内容创建的，其中包含一些二进制数据（作为数组传递）并能够下载那。这在 Chrome 中运行良好，但在 Firefox 中没有任何作用——除非我调试并逐步执行代码。是的，奇怪的是，如果我在函数内部创建一个断点并单步执行它，a.click() 将打开下载窗口！

function downloadFile(filename, data) {

    var a = document.createElement('a');
    a.style = "display: none";  
    var blob = new Blob(data, {type: "application/octet-stream"});
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);    
}

谁能帮帮我？这是使用 Firefox 38.0.5 测试的。

【问题讨论】：

对于 Firefox 需要调用 document.body.appendChild(a); 有点奇怪。
stackoverflow.com/questions/37817591/…的可能重复
真的需要revokeObjectURL吗？

标签： javascript firefox download blob

【解决方案1】：

您可能过早地删除了资源，请尝试延迟它

    ...
    a.click();
    setTimeout(function(){
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);  
    }, 100);  
}

【讨论】：

在 Worker 中创建的 Blob 对象 URL 存在类似问题，该 URL 在关闭 Worker 后被隐式撤销。你的回答让我走上了正确的轨道，在关闭 Worker 修复它之前添加了一个超时.. 谢谢！
只是想指出延迟0 的效果与我所知道的一样 - Firefox 只需要一个提示，无论您在做什么都可以进入调用堆栈的末尾，实际持续时间似乎无关紧要。
奇怪的是，这不是我的问题，但我必须在将锚附加到文档之前添加一个延迟，但是，它主要与您的想法一起工作。

【解决方案2】：

以上内容并没有为我解决问题。但是这个却做了：
Programmatical click on <a>-tag not working in Firefox
这是触发点击事件的问题，而不是过早删除资源。

【讨论】：

document.body.appendChild(newAElement); 也为我工作

【解决方案3】：

此解决方案适用于我在 bot chrome 和 firefox 中用于现有锚元素以下载二进制文件

window.URL = window.URL || window.webkitURL;

var blob = new Blob([new Uint8Array(binStream)], {type: "octet/stream"});

var link = document.getElementById("link");
link.href = window.URL.createObjectURL(blob);

【讨论】：

我用了你的例子，它有效： var link = document.getElementById("link"); link.href = window.URL.createObjectURL(响应); link.download = 文件名；链接.click();