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

原文地址：https://segmentfault.com/a/1190000016771027