javascript - native .click() 不会触发 Chrome 57 中的 Blob 下载

Question

一段客户端 Blob 保存代码在 Google Chrome 中突然停止工作。相同的代码在 Firefox 中继续工作。该代码几乎与 this answer 中提供的代码相同,等等。

var downloadLink = document.createElement("a");
var url = URL.createObjectURL(new Blob(["\ufeff", rows]));
downloadLink.href = url;
downloadLink.download = filename;

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

在 .click() 上设置断点然后单步执行导致文件按预期下载，但正常运行代码不会。我确实发现包装 .click()在setTimeout确实允许它成功，但前提是超时足够长

var downloadLink = document.createElement("a");
var url = URL.createObjectURL(new Blob(["\ufeff", rows]));
downloadLink.href = url;
downloadLink.download = filename;

document.body.appendChild(downloadLink);
setTimeout(function() {
    downloadLink.click();
    document.body.removeChild(downloadLink);
}, duration);

在哪里

Duration  |  Download
----------+----------
0 ms      |  Fail
1 ms      |  Fail
10 ms     |  Fail
100 ms    |  Fail
1000 ms   |  Succeed

我不确定问题是从版本 57 开始的，但我正在寻找有关如何在不诉诸 setTimeout 的情况下改进 Blob 下载的任何信息或建议。破解。

** 编辑 **

我应该清楚，Blob 下载是由用户发起的按钮点击触发的，而不是一段在页面加载时无条件运行的代码。

Answer 1

自从将提供的下载代码替换为调用 FileSaver,js saveAs 函数后，我决定查看 FileSave 代码，看看它与我的代码有何不同实现。

核心区别在于 File Saver 创建 anchor 节点，但不将其添加到 DOM。删除一些无关代码后，我将问题归结为 appendChild 调用

工作代码

var downloadLink = document.createElement("a");
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = filename;

// document.body.appendChild(downloadLink);
downloadLink.click();

删除注释行会导致代码再次失败。