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)文章
本文為大家介紹下使用js對輸入框進(jìn)行限制：文本框只能輸入數(shù)字代碼、只能輸入數(shù)字、只能輸入字母和漢字、只能輸入英文字母和數(shù)字等等，還有很多，感興趣的可以學(xué)習(xí)下2013-07-07
數(shù)組去重，一般都是在面試的時候才會碰到，一般是要求手寫數(shù)組去重方法的代碼。如果是被提問到，數(shù)組去重的方法有哪些？你能答出其中的10種，面試官很有可能對你刮目相看2019-12-12
tsc性能優(yōu)化Project References使用詳解
這篇文章主要為大家介紹了tsc性能優(yōu)化Project References使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
點擊按鈕怎么跳轉(zhuǎn)到另外一個頁面呢？點擊圖片要跳轉(zhuǎn)到新的頁面時，怎么做到呢？可以使用onclick=window.location=新頁面來實現(xiàn)2014-10-10
JavaScript動態(tài)添加數(shù)據(jù)到表單并提交的幾種方式
這篇文章主要介紹了JavaScript動態(tài)添加數(shù)據(jù)到表單并提交,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-06-06
JS.elementGetStyle(element, style)應(yīng)用示例
獲取Dom元素的Style數(shù)組中的指定Style元素，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
微信小程序非?；鸨?，今天腳本之家小編給大家?guī)淼奈⑿判〕绦蜃远xtab實現(xiàn)多層tab嵌套功能以及項目中遇到的問題及解決方法，感興趣的朋友一起看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了原生JS寫一個環(huán)形的鼠標(biāo)滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單計算器與秒表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
javascript中利用柯里化函數(shù)實現(xiàn)bind方法
這篇文章主要為大家詳細(xì)介紹了javascript中利用柯里化函數(shù)實現(xiàn)bind方法，感興趣的小伙伴們可以參考一下2016-04-04