如何在JavaScript中检测浏览器下载取消并执行对应函数？

用户问题场景 #

我使用以下JavaScript函数发起文件下载：

function save(object, mime, name) {
  var a = document.createElement('a');
  var url = URL.createObjectURL(object);
  a.href = url;
  a.download = name;
  a.click();
}

该函数通过创建下载链接并模拟点击启动下载流程，但我希望在用户取消下载或关闭标签页时执行特定函数（如图所示的取消按钮）。

请问是否有办法检测下载取消或中断的情况，从而执行对应函数或进行相应处理？如果没有，是否有可行的替代方案？我了解浏览器中的JavaScript对下载发起后的状态访问权限有限，恳请提供相关建议或替代思路！

核心限制说明 #

首先明确：浏览器出于安全和隐私限制，原生JavaScript无法直接检测下载的取消/完成状态。下载流程由浏览器独立处理，不会向页面JS暴露详细的状态回调接口。

可行替代思路 #

1. 基于「用户交互+超时」的间接判断 #

• 原理：下载发起后，若用户在设定时间内没有触发下载完成的关联操作（如页面切换后返回），则推测可能取消了下载。
• 实现示例：

function save(object, mime, name, onCancel) {
  var a = document.createElement('a');
  var url = URL.createObjectURL(object);
  a.href = url;
  a.download = name;
  
  // 设置超时检测，可根据文件大小调整时长
  const timeoutId = setTimeout(() => {
    // 若页面仍处于活跃状态，推测下载未完成（可能已取消）
    if (document.hasFocus()) {
      onCancel?.();
    }
  }, 5000);
  
  // 监听页面可见性变化，若用户切回页面则清除超时（认为下载已完成）
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible') {
      clearTimeout(timeoutId);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    }
  };
  
  a.addEventListener('click', () => {
    document.addEventListener('visibilitychange', handleVisibilityChange);
  });
  
  a.click();
}

// 使用示例
save(yourBlob, 'text/plain', 'test.txt', () => {
  console.log('推测下载已取消');
});

• 注意：该方式并非100%准确，仅适用于对精度要求不高的场景。

2. 后端配合的精准方案 #

• 原理：通过后端记录下载请求的状态，前端轮询接口获取下载是否完成/中断。
• 步骤：
  • 前端发起下载请求时，后端生成唯一下载ID并返回；
  • 前端启动下载的同时，定时调用后端接口查询该ID的状态（后端可通过TCP连接断开、请求完成标记判断下载状态）；
  • 根据后端返回的状态执行对应处理逻辑。
• 优势：状态判断准确，适合需要精确统计下载数据的业务场景。

3. 小文件场景：用FileReader监听中断 #

• 原理：针对小文件，先用FileReader读取文件内容，再模拟下载，同时监听读取过程的中断/错误事件。
• 实现示例：

function saveWithCancelCheck(blob, mime, name, onCancel) {
  const reader = new FileReader();
  let downloadLink = null;

  // 监听读取中断/错误事件
  reader.onabort = () => {
    onCancel?.();
    downloadLink && URL.revokeObjectURL(downloadLink.href);
  };
  reader.onerror = () => {
    onCancel?.();
    downloadLink && URL.revokeObjectURL(downloadLink.href);
  };

  // 读取完成后发起下载
  reader.onload = () => {
    downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = name;
    downloadLink.click();
  };

  reader.readAsArrayBuffer(blob);

  // 可提供手动取消按钮触发中断
  document.getElementById('cancel-download-btn')?.addEventListener('click', () => {
    reader.abort();
  });
}

• 注意：仅适合小文件，大文件会占用过多内存，影响页面性能。

总结 #

没有前端原生方案能精确检测下载取消状态，需根据业务场景选择：

• 对精度要求低：采用「超时+页面状态」的间接判断；
• 需要精准统计：配合后端实现状态查询；
• 小文件场景：用FileReader监听中断事件。

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