在需要批量下载文件时，总是最后一个文件能够下载成功，在 Chrome Devtool 的网络请求里可以看到前面的文件请求状态是 canceled，代码如下。

1
2
3
4
5
6
7
8
9
10

const saveFile = (url, filename) => {
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  link.click()
}

fileList.forEach((file) => {
  saveFile(file.url, file.filename)
})

• 原因：把 a 链接当成一次网页导航，当点击 a 链接跳转时又重复点击该链接，浏览器此时会重置之前的跳转并重新计算，这就导致了之前的网络请求都被 canceled。

• 解决方法：使用 iframe 隐藏下载，但是缺点是会在 body 里面嵌入多个 iframe。

  1 2 3 4 5 6 7 8 9 10 11

  const saveFile = (url: string) => { const iframe = document.createElement('iframe') iframe.setAttribute('sandbox', 'allow-downloads allow-scripts') iframe.src = url iframe.setAttribute('style', 'display: none') document.body.appendChild(iframe) setTimeout(() => { iframe.remove() }, 1000) }

参考链接:Browser is cancelling multiple file download requests