React+TypeScript中多文件依次下载仅成功一个的问题求助

嘿，我之前碰到过一模一样的问题！你这个情况主要是浏览器的安全机制和复用同一个<a>标签的操作逻辑在搞鬼，我给你拆解下原因，再分享几个靠谱的解决方案：

问题根源 #

1. 浏览器安全拦截：短时间内连续触发下载请求，尤其是快速修改同一个<a>标签的href，浏览器会判定为潜在的恶意行为，直接拦截后续请求。
2. 元素复用冲突：第一个下载请求还没被浏览器完全处理，你就立刻替换了<a>标签的href并再次点击，浏览器根本来不及响应后面的操作。

解决方案1：为每个文件创建独立的<a>标签 #

不用复用同一个元素，每次循环都新建一个<a>标签，用完再延迟移除，确保每个下载请求都是独立的：

const blockBlobURL = BlockBlobURL.fromContainerURL(containerURL, reportPath);
const blockWindBlobURL = BlockBlobURL.fromContainerURL(containerURL, windReportPath);
const blocktopographyBlobURL = BlockBlobURL.fromContainerURL(containerURL, topoGraphyPath);
const fileArr = [blockBlobURL, blockWindBlobURL, blocktopographyBlobURL];

fileArr.forEach(blobURL => {
  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = blobURL.url;
  // 可选：指定下载文件名，比如link.download = '地形报告.pdf'
  document.body.appendChild(link);
  link.click();
  // 延迟移除，给浏览器足够时间触发下载
  setTimeout(() => {
    document.body.removeChild(link);
  }, 100);
});

解决方案2：用Blob API手动处理（更稳定，支持自定义文件名） #

如果你的Azure Blob存储配置了正确的CORS规则，这种方式更可靠，还能自定义下载的文件名：

// 封装下载函数
const downloadBlobFile = async (blobURL: BlockBlobURL, fileName: string) => {
  try {
    // 获取Blob文件内容
    const response = await fetch(blobURL.url);
    const blob = await response.blob();
    const tempUrl = window.URL.createObjectURL(blob);
    
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = tempUrl;
    link.download = fileName; // 强制指定下载文件名
    document.body.appendChild(link);
    link.click();
    
    // 清理临时资源
    setTimeout(() => {
      document.body.removeChild(link);
      window.URL.revokeObjectURL(tempUrl);
    }, 100);
  } catch (error) {
    console.error('文件下载失败:', error);
  }
};

// 调用下载（可串行或并行）
const blockBlobURL = BlockBlobURL.fromContainerURL(containerURL, reportPath);
const blockWindBlobURL = BlockBlobURL.fromContainerURL(containerURL, windReportPath);
const blocktopographyBlobURL = BlockBlobURL.fromContainerURL(containerURL, topoGraphyPath);

// 串行下载（确保顺序）
await downloadBlobFile(blockBlobURL, '基础报告.pdf');
await downloadBlobFile(blockWindBlobURL, '风场报告.pdf');
await downloadBlobFile(blocktopographyBlobURL, '地形报告.pdf');

额外注意事项 #

• 如果你用方案2，要确保Azure Blob存储的CORS规则允许你的前端域名发起GET请求，否则会出现跨域错误。
• 如果浏览器还是偶尔拦截请求，可以在下载之间加个200ms左右的延迟，避免触发安全限制。

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