如何捕获form.submit()响应以处理大文件下载完成事件？

由于直接提交表单到当前窗口（_self）时，浏览器处理下载流不会触发页面onload，且XMLHttpRequest无法直接触发浏览器默认下载行为（你提到只能用表单方式），可以通过隐藏iframe来监听下载完成事件，具体实现如下：

修改后的客户端代码 #

var url = '@Url.Action("Download", "Home")';
var archAction = url;

// 创建隐藏iframe用于监听下载完成
var iframe = document.createElement("iframe");
iframe.id = "downloadFrame";
iframe.style.display = "none";
document.body.appendChild(iframe);

// 创建表单并配置
var form = document.createElement("form");
form.id = "downloadPublicDocs";
form.method = "post";
form.action = archAction;
form.style.display = "none";
form.target = "downloadFrame"; // 表单提交到隐藏iframe
document.body.appendChild(form);

// 监听iframe的load事件，捕获下载完成
iframe.addEventListener("load", function() {
    alert("下载完成");
    $("#archLoader").fadeOut(1000);
    // 可选：移除临时创建的iframe和表单
    setTimeout(() => {
        document.body.removeChild(iframe);
        document.body.removeChild(form);
    }, 1000);
});

// 显示加载器并提交表单
$("#archLoader").fadeIn(1000);
form.submit();

原理说明 #

• 表单提交到隐藏iframe后，浏览器会处理后端返回的下载流，同时iframe会在响应完成后触发load事件（无论下载是否被用户保存，只要后端返回完整流）。
• 既保留了浏览器默认的下载行为，又解决了直接提交到当前窗口无法监听完成状态的问题。

注意事项 #

• 确保后端返回的响应头包含正确的Content-Disposition（比如attachment; filename=xxx.zip），否则浏览器可能不会触发下载，而是直接在iframe中显示内容，此时load事件仍会触发，但需要额外判断响应内容。
• 如果后端存在超时或错误，iframe的load事件也会触发，可在事件处理中通过iframe的内容判断是否下载成功（比如检查是否返回错误页面）。

内容的提问来源于stack exchange，提问作者Natalia