Chrome中使用window.URL.createObject下载多文件时间歇性失败问题

嘿，我之前帮团队排查过几乎一模一样的Chrome多文件下载间歇性异常问题，结合你描述的内部应用场景（base64解码后下载、最新版Chrome跨Win/OSX），给你几个实用的排查和解决方向：

核心问题根源推测 #

Chrome的自动下载安全机制对连续触发的下载请求有隐性“节流”逻辑——哪怕你已经开启了允许多个自动下载的全局设置，短时间内连续触发的请求还是可能被浏览器判定为潜在风险，导致其中一个被拦截；另外，base64解码、Blob创建的过程如果存在隐性错误，也会导致部分下载失败。

具体解决步骤 #

1. 给连续下载加微小延迟 #

Chrome处理第一个下载请求时，需要一点时间完成初始化（比如创建下载任务、写入磁盘等），如果第二个请求触发得太急，很容易被安全机制忽略。建议在两个下载之间加100-200ms的延迟，这个时间足够Chrome完成第一个下载的初始化，又不会让用户感觉到卡顿：

// 先触发第一个文件下载
downloadFile(file1Data);
// 延迟150ms触发第二个
setTimeout(() => {
  downloadFile(file2Data);
}, 150);

2. 确保base64解码和Blob创建无错误 #

很多时候间歇性失败是因为API返回的是URL安全格式的base64（用-代替+、_代替/），解码时没处理导致Blob创建失败。建议在解码前先做格式转换，同时添加错误捕获：

function decodeBase64ToBlob(base64Str, mimeType) {
  try {
    // 处理URL安全的base64格式
    const safeBase64 = base64Str.replace(/-/g, '+').replace(/_/g, '/');
    const byteChars = atob(safeBase64);
    const byteArray = new Uint8Array(byteChars.length);
    for (let i = 0; i < byteChars.length; i++) {
      byteArray[i] = byteChars.charCodeAt(i);
    }
    return new Blob([byteArray], { type: mimeType });
  } catch (err) {
    console.error('Base64解码或Blob创建失败:', err);
    return null;
  }
}

调用这个函数时，一定要检查返回的Blob是否为null，避免触发无效的下载请求。

3. 规范下载触发的DOM操作 #

如果你是通过创建<a>标签并模拟点击来触发下载，要确保每次创建的标签都被正确清理，避免DOM元素堆积导致的冲突：

function triggerDownload(blob, filename) {
  if (!blob) return;
  
  const url = URL.createObjectURL(blob);
  const aTag = document.createElement('a');
  
  aTag.href = url;
  aTag.download = filename;
  document.body.appendChild(aTag);
  aTag.click();
  
  // 下载触发后及时清理资源
  setTimeout(() => {
    document.body.removeChild(aTag);
    URL.revokeObjectURL(url); // 释放Blob URL占用的内存
  }, 100);
}

4. 确认站点级的自动下载权限 #

即使你开启了Chrome全局的“允许网站自动下载多个文件”设置，个别站点可能需要单独确认权限。你可以：

• 点击地址栏左侧的锁图标
• 选择「网站设置」
• 找到「自动下载」选项，确认设置为「允许」

5. 排查异步请求的顺序问题 #

如果你的两个base64数据是通过并行API请求获取的，可能会出现第一个请求完成后就触发下载，但第二个请求还未返回的情况，导致只下载一个文件。建议用Promise.all等待两个请求都完成后，再依次触发下载：

// 假设fetchFile1和fetchFile2是返回Promise的API请求函数
Promise.all([fetchFile1(), fetchFile2()])
  .then(([file1, file2]) => {
    const blob1 = decodeBase64ToBlob(file1.base64, file1.mimeType);
    const blob2 = decodeBase64ToBlob(file2.base64, file2.mimeType);
    
    triggerDownload(blob1, file1.filename);
    setTimeout(() => {
      triggerDownload(blob2, file2.filename);
    }, 150);
  })
  .catch(err => console.error('API请求失败:', err));

调试建议 #

当问题出现时，立刻打开Chrome开发者工具：

• 查看「Console」面板，有没有解码失败、Blob创建失败的报错
• 查看「Network」面板的「Downloads」标签，确认两个下载请求是否都被浏览器接收

内容的提问来源于stack exchange，提问作者Matthew Brent