一次下載多個(gè)文件的解決思路-JS

HitenDev 發(fā)布于2019-08-02 11:48 / 2661人閱讀

摘要：一次下載多個(gè)文件的解決思路真實(shí)經(jīng)歷最近開發(fā)項(xiàng)目需要做文件下載，想想挺簡(jiǎn)單的，之前也做過，后臺(tái)提供下載接口，前端使用就行了唄。不過開發(fā)的時(shí)候發(fā)現(xiàn)，有些文件有附屬文件，點(diǎn)擊下載按鈕需要下載兩個(gè)文件，而且不能使用壓縮包的形式。

一次下載多個(gè)文件的解決思路(iframe) - Eric

真實(shí)經(jīng)歷

最近開發(fā)項(xiàng)目需要做文件下載，想想挺簡(jiǎn)單的，之前也做過，后臺(tái)提供下載接口，前端使用window.location.href就行了唄。不過開發(fā)的時(shí)候發(fā)現(xiàn)，有些文件有附屬文件，點(diǎn)擊 下載按鈕 需要下載兩個(gè)文件，而且不能使用壓縮包的形式。想想不是也挺簡(jiǎn)單，點(diǎn)擊下載發(fā)送兩個(gè)下載請(qǐng)求不就搞定了么。

說干就干，三下五除二就寫好了，當(dāng)點(diǎn)擊下載的那一刻懵逼了，第一個(gè)請(qǐng)求竟然自動(dòng)Cancelled了，頓時(shí)一萬個(gè)草泥馬崩騰而過(因?yàn)槭菄夥?wù)器，下載比較慢導(dǎo)致第一個(gè)請(qǐng)求被Cancelled)，這就意味著快速點(diǎn)擊不同的下載按鈕也會(huì)有同樣的問題，這不行啊，然后開始了自己的下載探索之旅。

a標(biāo)簽 & location.href

我們知道a標(biāo)簽及href指向的如果是一個(gè)下載鏈接，那么相當(dāng)于下載文件，對(duì)于單文件下載還是ok的，不過快速點(diǎn)擊幾個(gè)下載按鈕，有的下載會(huì)被Cancelled，這可不行，繼續(xù)百度。

上一段代碼：

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

window.open

我們知道window.open可以打開一個(gè)新窗口，那么是不是可以實(shí)現(xiàn)下載呢，激動(dòng)的我趕緊試了試，下載的確可以，不過會(huì)快速打開一個(gè)新窗口并且關(guān)閉，體驗(yàn)非常不好，果斷放棄了。

iframe

突然想到iframe也可以向服務(wù)器發(fā)請(qǐng)求的，激動(dòng)的我又趕緊試了試，哇塞，果然可以下載，而且沒有違和感，代碼貼出來。

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樹上才會(huì)發(fā)請(qǐng)求
  // 5分鐘之后刪除（onload方法對(duì)于下載鏈接不起作用，就先摳腳一下吧）
  setTimeout(()=>{
    iframe.remove();
  }, 5 * 60 * 1000);
}

ps： iframe不會(huì)相互影響，可以連續(xù)下載哦!

其他方案

當(dāng)然還有一些其他方式，F(xiàn)orm下載、二進(jìn)制流下載等，有空的小伙伴自行研究吧!