首頁 >web前端 >js教程 >javascript實作多個任務一次下載的方法介紹

javascript實作多個任務一次下載的方法介紹

不言
不言轉載
2018-10-23 15:27:132332瀏覽

這篇文章帶給大家的內容是關於php協成實現的詳解(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

真實經歷

最近開發專案需要做文件下載,想想挺簡單的,之前也做過,後台提供下載接口,前端使用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下載、二進位流下載等,有空的小夥伴自行研究吧!

以上是javascript實作多個任務一次下載的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除