如何监听Anchor标签文件下载的开始与结束事件？附尝试代码

嘿，我看你现在在用<a>标签实现文件下载，想监听下载的开始和结束状态对吧？你当前的代码有个很直观的问题：点击<a>标签后，JS会立刻执行隐藏提示和移除元素的操作，因为浏览器的下载是异步的，不会卡住JS线程，所以你的#eventmessage刚冒出来就消失了，根本起不到提示作用。而且原生<a>标签本身就没有下载开始/结束的监听事件，所以得换个思路来实现，下面给你几个可行的方案：

方案1：用Fetch先获取文件，再创建Blob下载（推荐） #

这种方式能完整监听下载的进度、开始和结束状态，只要后端能返回正确的文件内容和响应头就行：

优化后的JS代码 #

function downloadReport() {
  const messageEl = document.getElementById('eventmessage');
  messageEl.style.display = 'block';
  messageEl.textContent = '正在下载，请稍候...';

  fetch('../dataObject/reporte/get_report.php')
    .then(response => {
      if (!response.ok) throw new Error('下载请求失败，请稍后重试');
      // 从后端响应头里提取文件名（如果后端设置了Content-Disposition的话）
      const filenameMatch = response.headers.get('Content-Disposition')?.match(/filename="?([^"]+)"?/);
      const filename = filenameMatch ? filenameMatch[1] : 'report.xlsx';
      return response.blob();
    })
    .then(blob => {
      // 创建临时a标签来下载Blob
      const a = document.createElement('a');
      const blobUrl = URL.createObjectURL(blob);
      a.href = blobUrl;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      
      // 清理临时资源，避免内存泄漏
      setTimeout(() => {
        URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
      }, 100);

      // 下载完成提示
      messageEl.textContent = '下载完成！';
      setTimeout(() => {
        messageEl.style.display = 'none';
      }, 2000);
    })
    .catch(error => {
      messageEl.textContent = `下载失败：${error.message}`;
      setTimeout(() => {
        messageEl.style.display = 'none';
      }, 3000);
    });
}

为啥这个方案好用？ #

• 用fetch请求文件，能直接监听请求的成功/失败状态
• 可以从后端的Content-Disposition头里拿文件名，不用硬编码
• 下载完成后会自动清理临时的Blob URL，不会占内存
• 能给用户清晰的状态反馈：从“正在下载”到“完成/失败”，体验比原来好太多

方案2：用Navigator.downloads API（仅HTTPS环境可用） #

如果你的网站跑在HTTPS环境下，还可以用浏览器自带的下载API来监听系统级的下载事件，不过这个兼容性不算太好，主要支持Chrome、Edge这类Chromium系浏览器：

JS代码示例 #

async function downloadReport() {
  const messageEl = document.getElementById('eventmessage');
  messageEl.style.display = 'block';
  messageEl.textContent = '正在下载，请稍候...';

  // 先创建a标签触发下载
  const a = document.createElement('a');
  a.href = '../dataObject/reporte/get_report.php';
  a.download = 'report.xlsx';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);

  try {
    // 先请求用户授权访问下载列表
    await navigator.downloads.request();
    // 监听下载状态变化
    const downloadListener = (downloadItem) => {
      if (downloadItem.state === 'complete') {
        messageEl.textContent = '下载完成！';
        setTimeout(() => messageEl.style.display = 'none', 2000);
        // 记得移除监听，避免内存浪费
        navigator.downloads.onChanged.removeListener(downloadListener);
      } else if (downloadItem.state === 'interrupted') {
        messageEl.textContent = '下载被中断了';
        setTimeout(() => messageEl.style.display = 'none', 3000);
        navigator.downloads.onChanged.removeListener(downloadListener);
      }
    };
    navigator.downloads.onChanged.addListener(downloadListener);
  } catch (error) {
    messageEl.textContent = '无法自动监听下载状态，请手动查看浏览器下载列表';
    setTimeout(() => messageEl.style.display = 'none', 3000);
  }
}

注意事项 #

• 这个API需要用户授权，而且必须在HTTPS环境下才能用
• 优点是不用提前获取文件内容，直接监听系统下载状态
• 缺点是兼容性有限，Firefox仅部分支持，Safari完全不支持

临时应急：修复你原有代码的问题（不推荐） #

如果因为某些限制必须用原生<a>标签，又没法用上面的方案，只能用“猜下载时间”的方式（非常不可靠，仅临时救急）：

function downloadReport(){
  const messageEl = document.getElementById('eventmessage');
  messageEl.style.display = 'block';
  messageEl.textContent = '正在下载，请稍候...';
  
  const a = document.createElement("a");
  a.href = "../dataObject/reporte/get_report.php";
  a.download = "report.xlsx"; // 你原来的代码这里漏写了文件名！
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  
  // 假设下载需要5秒，实际要根据你的文件大小和用户网络调整
  setTimeout(() => {
    messageEl.style.display = 'none';
  }, 5000);
}

为啥不推荐？ #

• 完全靠猜时间，用户网络差的话提示会提前消失，网络好的话会一直显示，体验很差
• 你原来的代码里$a.attr("download");是错误的，得指定下载文件名，不然浏览器可能会用默认的文件名或者直接打开文件

最后提个小建议：如果用方案1，记得让后端的get_report.php返回正确的Content-Type，比如Excel文件要返回application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，这样浏览器才会正确识别文件类型。如果是大文件，最好加上Content-Length头，还能扩展实现下载进度条哦！

内容的提问来源于stack exchange，提问作者Marcelo Calle Chávez