亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

一次下載多個文件的解決思路-JS

techstay / 2476人閱讀

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

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

真實經(jīng)歷

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

說干就干，三下五除二就寫好了，當(dāng)點(diǎn)擊 下載 的那一刻懵逼了， 第一個請求竟然自動Cancelled了，頓時一萬個草泥馬崩騰而過(因為是國外服務(wù)器，下載比較慢導(dǎo)致第一個請求被Cancelled)，這就意味著快速點(diǎn)擊不同的 下載 按鈕也會有同樣的問題，這不行啊，然后開始了自己的下載探索之旅。

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

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

上一段代碼：

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

window.open

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

iframe

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

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

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

其他方案

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/98592.html

相關(guān)文章

  • 一次下載多個文件的解決思路-JS

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

    HitenDev 評論0 收藏0

  • 深入理解 Webpack 打包分塊（上）

    摘要：而一個哈希字符串就是根據(jù)文件內(nèi)容產(chǎn)生的簽名，每當(dāng)文件內(nèi)容發(fā)生更改時，哈希串也就發(fā)生了更改，文件名也就隨之更改。很顯然這不是我們需要的，如果文件內(nèi)容發(fā)生了更改，的打包文件的哈希應(yīng)該發(fā)生變化，但是不應(yīng)該。前言 隨著前端代碼需要處理的業(yè)務(wù)越來越繁重，我們不得不面臨的一個問題是前端的代碼體積也變得越來越龐大。這造成無論是在調(diào)式還是在上線時都需要花長時間等待編譯完成，并且用戶也不得不花額外的時間和帶寬...

    Rocko 評論0 收藏0

  • 尤大低仿博客帶回家

    摘要：你沒有看錯，只需幾小時，低仿的尤大作者博客你帶回家，有的小朋友可能注意到，為啥這里沒說同款和高仿的原因是在還有一些其他的方面，都是簡單的實現(xiàn)，我怕說了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的。步驟如下首先登錄阿里云控制臺。 前言 就在上周六看到阿里云服務(wù)器搞一個活動，6元錢一年的共享虛擬主機(jī)。但是之前有使用過，覺得最蛋疼的地方是，它只給你開放一個ftp，而且權(quán)限上面也有一些控制...

    chanjarster 評論0 收藏0

  • 尤大低仿博客帶回家

    摘要：你沒有看錯，只需幾小時，低仿的尤大作者博客你帶回家，有的小朋友可能注意到，為啥這里沒說同款和高仿的原因是在還有一些其他的方面，都是簡單的實現(xiàn)，我怕說了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的。步驟如下首先登錄阿里云控制臺。 前言 就在上周六看到阿里云服務(wù)器搞一個活動，6元錢一年的共享虛擬主機(jī)。但是之前有使用過，覺得最蛋疼的地方是，它只給你開放一個ftp，而且權(quán)限上面也有一些控制...

    ztyzz 評論0 收藏0

  • 尤大低仿博客帶回家

    摘要：你沒有看錯，只需幾小時，低仿的尤大作者博客你帶回家，有的小朋友可能注意到，為啥這里沒說同款和高仿的原因是在還有一些其他的方面，都是簡單的實現(xiàn)，我怕說了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的。步驟如下首先登錄阿里云控制臺。 前言 就在上周六看到阿里云服務(wù)器搞一個活動，6元錢一年的共享虛擬主機(jī)。但是之前有使用過，覺得最蛋疼的地方是，它只給你開放一個ftp，而且權(quán)限上面也有一些控制...

    missonce 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<