一次下载多个文件的解决思路-JS

一次下载多个文件的解决思路(iframe) - Eric

---

真实经历

最近开发项目须要作文件下载，想一想挺简单的，以前也作过，后台提供下载接口，前端使用window.location.href就好了呗。不过开发的时候发现，有些文件有附属文件，点击 下载按钮 须要下载两个文件，并且不能使用压缩包的形式。想一想不是也挺简单，点击 下载 发送两个下载请求不就搞定了么。

说干就干，三下五除二就写好了，当点击 下载 的那一刻懵逼了， 第一个请求居然自动Cancelled了，顿时一万个草泥马崩腾而过(由于是国外服务器，下载比较慢致使第一个请求被Cancelled)，这就意味着快速点击不一样的 下载 按钮也会有一样的问题，这不行啊，而后开始了本身的下载探索之旅。

---

a标签 & location.href

咱们知道a标签及href指向的若是是一个下载连接，那么至关于下载文件，对于单文件下载仍是ok的，不过快速点击几个下载按钮，有的下载会被Cancelled，这可不行，继续百度。

上一段代码：

const download = (url)=>{
   window.location.href = url;
}

---

window.open

咱们知道window.open能够打开一个新窗口，那么是否是能够实现下载呢，激动的我赶忙试了试，下载的确能够，不过会快速打开一个新窗口而且关闭，体验很是很差，果断放弃了。

---

iframe

忽然想到iframe也能够向服务器发请求的，激动的我又赶忙试了试，哇塞，果真能够下载，并且没有违和感，代码贴出来。

export const downloadFile = (url) => {
  const iframe = document.createElement("iframe");
  iframe.style.display = "none"; // 防止影响页面
  iframe.style.height = 0; // 防止影响页面
  iframe.src = url; 
  document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
  // 5分钟以后删除（onload方法对于下载连接不起做用，就先抠脚一下吧）
  setTimeout(()=>{
    iframe.remove();
  }, 5 * 60 * 1000);
}

ps： iframe不会相互影响，能够连续下载哦!

---

其余方案

固然还有一些其余方式，Form下载、二进制流下载等，有空的小伙伴自行研究吧!