如何在前端文件下载请求完成后正确执行指定回调函数

当前通过动态创建<a>标签触发点击的下载逻辑存在本质缺陷：anchorElement.click()仅会同步通知浏览器将下载任务加入系统下载队列，浏览器完成入队操作后就会立刻执行后续代码，不会等待文件实际传输完成。因此你写在click()后的_callback()会在点击触发的瞬间同步执行，根本无法监听到真实的下载完成时机，最终导致加载动画启停逻辑完全失控。

放弃直接给a标签赋值静态资源URL的实现方式，改用fetch拉取文件二进制流到当前页面上下文，等文件完整接收完成后再生成临时Blob地址触发下载，此时可以精准控制加载态关闭、回调执行的时机。

修复后的完整代码：

public static async exportData(id: number, _callback: Function): Promise<void> {
  const queryString = stringifyQuery(
    {
      token: BaseAPI.getJwt(),
    },
    {
      arrayFormat: "bracket",
    }
  );

  try {
    // 发起请求拉取文件流
    const res = await fetch(`YOUR_DOWNLOAD_URL?${queryString}`, {
      method: "GET"
    });
    if (!res.ok) throw new Error(`下载请求异常，状态码：${res.status}`);

    // 等待文件二进制数据全部接收完成
    const fileBlob = await res.blob();

    // 生成临时Blob地址触发浏览器保存
    const tempUrl = window.URL.createObjectURL(fileBlob);
    const anchorElement = document.createElement("a");
    anchorElement.download = "file.xlsx";
    anchorElement.href = tempUrl;
    anchorElement.click();

    // 释放临时地址避免内存泄漏
    window.URL.revokeObjectURL(tempUrl);

    // 确认下载流程全部走完后再执行关闭模态框的回调
    _callback();
  } catch (err) {
    console.error("数据导出失败：", err);
    // 异常场景也要执行回调，避免加载态永久卡死
    _callback();
  }
}

• 不推荐使用“后端写标记Cookie+前端轮询”“服务端返回下载完成标识”这类曲线方案，实现繁琐且兼容性差，fetch拉流的方案逻辑最直观、可控性最高
• 如果需要展示大文件的实时下载进度，可以基于response.body返回的ReadableStream做进度计算，不需要额外依赖
• 页面JS上下文和浏览器系统下载管理器是隔离的，直接触发a标签下载的场景下，页面没有任何原生API可以拿到跨域资源的下载完成状态，不要在这个方向浪费时间

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