一次下載多個文件的解決思路-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下載、二進制流下載等，有空的小夥伴自行研究吧!