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