Question

我正在开展一个项目，我们有一个AJAX调用，它响应一个包含excel文件的blob。我希望代码在我得到响应时打开文件作为下载。这是回调：

var blob = new Blob([response.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
var objectUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
var header = response.headers("Content-Disposition");
a.download = header.substring(header.indexOf("filename=") + "filename=".length);
a.href = objectUrl;
document.body.appendChild(a);
console.debug("Clicking a tag");
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(objectUrl);

此代码在chrome中工作正常，但在firefox中，当a.click（）触发时没有任何反应。调试语句打印，所以我知道回调正在发生。此外，出于某种原因，如果我在a.click()上设置断点，它就能完美运行。

有人可以解释为什么点击只能在调试模式下工作吗？

Answer 1

Firefox有一些保护措施，或者只是围绕这样的事情做出奇怪的行为。我不知道推导，但在点击之前回到浏览器片刻通常会清除它：

// ...
a.href = objectUrl;
document.body.appendChild(a);
setTimeout(function() {
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(objectUrl);
}, 0);
// ...

请注意，setTimeout之后的代码将在setTimeout的内容之前运行。

您甚至可能需要两个：

// ... a.href = objectUrl; document.body.appendChild(a); setTimeout(function() { a.click(); setTimeout(function() { document.body.removeChild(a); window.URL.revokeObjectURL(objectUrl); }, 0); }, 0); // ...

Firefox a.click不会在没有断点的情况下解雇

1 个答案: