iframe一次下載多個文件實例
更新時間：2023年01月11日 11:17:11 作者：念念不忘
這篇文章主要為大家介紹了iframe一次下載多個文件實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
背景
在項目開發(fā)中，點擊 【導(dǎo)出】按鈕需要下載兩個 excel 文件，之前下載文件都是使用的 window.location.href = '下載url' 就能實現(xiàn)下載功能，但是只能是單文件的下載，多文件的下載需要借助 iframe 來實現(xiàn)。
解決方案
使用 iframe 可以實現(xiàn)一個點擊按鈕下載多個文件，具體實現(xiàn)如下：
const urlArr = ['https://test.com/order_export_1663644115.csv', 'https://test.com/order_export_1663644223.csv']
function exportExcel(url) {
const iframe = document.createElement('iframe');
iframe.style = none; // 防止影響現(xiàn)有頁面內(nèi)容
iframe.src = url;
document.body.appendChild(iframe) // iframe 必須掛載到 dom 樹才會發(fā)送請求
iframe.onload = function () {
document.body.removeAttribute(iframe) // 之后刪除iframe
}
}
urlArr.forEach((item) => {
exportExcel(item)
})
當(dāng)時使用的這個方案下載文件,服務(wù)端返回的文件地址的是阿里云的oss對象存儲,然后下載MP4 或者 image 文件的時候一直打開預(yù)覽,不會觸發(fā)瀏覽器下載行為
解決方案是：可以設(shè)置文件的響應(yīng)頭或者,在請求url后面拼接
'?response-content-type=application/octet-stream';
以上就是iframe一次下載多個文件實例的詳細(xì)內(nèi)容，更多關(guān)于iframe下載多個文件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義導(dǎo)航欄（模板化），文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript中的數(shù)組includes()方法用于判斷數(shù)組中是否包含指定的元素,并返回一個布爾值,這篇文章主要介紹了js includes方法的使用,需要的朋友可以參考下2024-01-01
正如標(biāo)題所言我們可以使用CSS截斷字符串：IE,FireFox，Opera ，Safari都兼容也可以使用js截取，具體實現(xiàn)如下，希望對大家有所幫助2013-07-07
下面小編就為大家?guī)硪黄猨s實現(xiàn)股票實時刷新數(shù)據(jù)案例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
javascript中Date對象的getDay方法使用指南
這篇文章主要介紹了javascript中Date對象的getDay方法使用以及各種優(yōu)化方案，非常不錯的文章，這里推薦給大家。2014-12-12
使用JS打開圖片另存為對話框一直都是網(wǎng)頁應(yīng)用中不可缺少的一部分，本人有些好奇，于是搜集整理了一些實現(xiàn)代碼，不知道符不符合大眾的口味，在此班門弄斧了，需要的朋友可以了解下2012-12-12
在瀏覽網(wǎng)頁時會看到這樣的效果：當(dāng)鼠標(biāo)滑過一張圖片后，這張圖片切換為了另外的一張圖片，下面為大家介紹下具體是如何實現(xiàn)的，感興趣的朋友不要錯過2013-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)AI五子棋人機(jī)大戰(zhàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了JS字符串截取函數(shù)實例，有需要的朋友可以參考一下2013-12-12
下面小編就為大家?guī)硪黄钔ㄋ滓锥膉avascript變量提升詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08