JavaScript实现点击单个按钮批量下载多音频链接文件问题求助

问题根因 #

你当前实现仅能下载最后一个文件的核心原因是浏览器的安全限制机制：短时间内连续触发的多次下载请求会被识别为异常操作，同步循环执行的click()调用大部分会被拦截，仅最后一次请求会被放行。

可行解决方案 #

方案1：错开下载触发时机（改动最小，无需跨域支持）

给每个下载请求增加间隔延迟，避开浏览器的连续下载拦截规则，仅需修改JS逻辑即可：

const downloadAll = () => {
  const allLinks = document.querySelectorAll('a');
  allLinks.forEach((link, index) => {
    // 间隔200ms触发一次下载，可根据实际情况调整为300-500ms
    setTimeout(() => {
      link.click();
    }, index * 200);
  });
}

该方案不需要修改现有HTML结构，也不需要资源支持跨域，兼容性最好。第一次触发批量下载时部分浏览器会弹出「允许多个文件下载」的授权提示，用户授权后即可正常下载全部文件。

方案2：fetch+Blob实现（稳定性更高，需跨域支持）

如果你的音频资源和当前站点同域，或者资源服务器配置了CORS跨域规则，可以用该方案实现更稳定的批量下载，不需要依赖延迟配置：

// 单文件下载工具函数
const downloadFile = async (fileUrl, fileName) => {
  const response = await fetch(fileUrl);
  const fileBlob = await response.blob();
  const tempLink = document.createElement('a');
  tempLink.href = URL.createObjectURL(fileBlob);
  // 自定义下载文件名，也可以直接用link的textContent
  tempLink.download = fileName || fileUrl.split('/').pop();
  document.body.appendChild(tempLink);
  tempLink.click();
  // 清理临时对象
  document.body.removeChild(tempLink);
  URL.revokeObjectURL(tempLink.href);
}

const downloadAll = async () => {
  const allLinks = document.querySelectorAll('a');
  for (const link of allLinks) {
    await downloadFile(link.href);
  }
}

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