javascript下載文件5種方式實(shí)例詳解
前言
整理javascript下載文件五種方式,接收后臺(tái)返回流下載或直接下載文件。歡迎補(bǔ)充~
業(yè)務(wù)場(chǎng)景
假設(shè)通過(guò)后端接口返回的流,需要前端點(diǎn)擊【下載到本地】按鈕下載文件。
一.window.location.href下載
最簡(jiǎn)單的方式:url即文件或接口地址,額外參數(shù)通過(guò)url后問(wèn)號(hào)拼接參數(shù),后端get請(qǐng)求方式接收。
let url='http://10.0.0.103:6767/file/downloadFile' window.location.href = url
缺陷:1.直接訪問(wèn)可能會(huì)覆蓋當(dāng)前頁(yè)面地址,影響用戶體驗(yàn)。
2.圖片、pdf 等url資源會(huì)表現(xiàn)為預(yù)覽而非下載。
二.window.open()下載
用指定的名稱將指定的資源加載到瀏覽器上下文(窗口 window ,內(nèi)嵌框架 iframe 或者標(biāo)簽 tab )。如果沒(méi)有指定名稱,則一個(gè)新的窗口會(huì)被打開(kāi)并且指定的資源會(huì)被加載進(jìn)這個(gè)窗口的瀏覽器上下文中。url為后端提供的文件下載路徑
let url='http://10.0.0.103:6767/file/downloadFile' window.open(url);
缺陷:這個(gè)方法只能將指定路徑的資源加載到瀏覽器里面,如果文件不能被瀏覽器瀏覽,那就會(huì)被瀏覽器下載到本地。反之,如果下載一個(gè)txt文本,用該方法會(huì)直接預(yù)覽txt文件。
三.iframe 下載
和創(chuàng)建動(dòng)態(tài)a標(biāo)簽的邏輯大同小異。
<el-button size="mini" @click="handleExport(item)">導(dǎo)出</el-button> function handleExport(item) { try { let url='http://10.0.0.103:6767/file/downloadFile'; let elementIftrame = document.createElement("iframe"); elementIF.src = url; elementIF.style.display = "none"; document.body.appendChild(elementIftrame); }catch(error) { console.log(error); } }
四.【動(dòng)態(tài)a標(biāo)簽】結(jié)合【axios方法】的方式下載
-axios請(qǐng)求將后端給的文件流下載下來(lái)
-若該接口有登錄校驗(yàn),將下載的文件流轉(zhuǎn)換成blob數(shù)據(jù),反之不需要這一步
-通過(guò)window.URL.createObjectURL(blob)將blob轉(zhuǎn)化成url
-通過(guò)動(dòng)態(tài)生成a標(biāo)簽,模擬點(diǎn)擊下載事件
-完成下載動(dòng)作
1.若/getZipInfo接口沒(méi)有登錄校驗(yàn),就不用下載文件流轉(zhuǎn)成blob數(shù)據(jù)。
let curHost=window.location.host let fileName=`module_20230920.zip` let url=`${curHost}/service/getZipInfo?fileName=${fileName}` // 創(chuàng)建下載按鈕a標(biāo)簽進(jìn)行自動(dòng)點(diǎn)擊下載,下載完后移除按鈕a標(biāo)簽 let downloadDom=document.createElement('a') downloadDom.href=url // downloadDom.download=fileName //--不是必須 若需要【前端重命名文件夾】的話這句代碼就需要 document.body.appendChild(downloadDom) downloadDom.click() document.body.removeChild(downloadDom)
2.若/getZipInfo接口有登錄校驗(yàn),就需要把下載文件流轉(zhuǎn)成blob數(shù)據(jù)再下載,res為文件流
let fileName=`module_20230920.zip` let blob=new Blob([res],{type:'application/octet-stream'}) let href=window.URL.createObjectURL(blob) // 創(chuàng)建下載按鈕a標(biāo)簽進(jìn)行自動(dòng)點(diǎn)擊下載,下載完后移除按鈕a標(biāo)簽 let downloadDom=document.createElement('a') downloadDom.href=href downloadDom.download=fileName //--不是必須 若需要【前端重命名文件夾】的話這句代碼就需要 document.body.appendChild(downloadDom) downloadDom.click() document.body.removeChild(downloadDom) window.URL.revokeObjectURL(href)
五.form表單的形式下載【比較少用到,借鑒別人的方法】
function handleExport() { let url='http://10.0.0.103:6767/file/downloadFile' var form = $("<form>") form.attr("style", "display:none") /**target 屬性規(guī)定一個(gè)名稱或一個(gè)關(guān)鍵詞,指示在何處打開(kāi) action URL, * 即在何處顯示提交表單后接收到的響應(yīng)。 * *_blank 在新窗口/選項(xiàng)卡中打開(kāi)。 *_self 在同一框架中打開(kāi)。(默認(rèn)) *_parent 在父框架中打開(kāi)。 *_top 在整個(gè)窗口中打開(kāi)。 *framename 在指定的 iframe 中打開(kāi)。 */ form.attr("target", "_self"); form.attr("method", "get"); form.attr("action", url); $("body").append(form); // 提交 form.submit(); }
注意: 若下載的文件包解壓時(shí)需要密碼的話,前后端生成的文件名必須一致才能解壓,否則無(wú)法會(huì)導(dǎo)致解壓失敗。
總結(jié)
到此這篇關(guān)于javascript下載文件5種方式的文章就介紹到這了,更多相關(guān)js下載文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)移動(dòng)端判斷上拉和下滑功能
通過(guò)手指觸屏,利用touchstart和touchend計(jì)算前后滑動(dòng)距離,判斷是上拉還是下滑。接下來(lái)通過(guò)實(shí)例代碼給大家介紹js移動(dòng)端判斷上拉和下滑功能,感興趣的朋友一起看看吧2017-08-08JavaScript涉及二進(jìn)制的轉(zhuǎn)換方式
這篇文章主要介紹了JavaScript涉及二進(jìn)制的轉(zhuǎn)換方式,具有很好的 參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06JavaScript實(shí)現(xiàn)的多種鼠標(biāo)拖放效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的多種鼠標(biāo)拖放效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11關(guān)于獲取DIV內(nèi)部?jī)?nèi)容報(bào)錯(cuò)的原因分析及解決辦法
這篇文章主要介紹了關(guān)于獲取DIV內(nèi)部?jī)?nèi)容報(bào)錯(cuò)的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-01-01Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié)
這篇文章主要介紹了Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié) 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08JavaScript動(dòng)態(tài)添加數(shù)據(jù)到表單并提交的幾種方式
這篇文章主要介紹了JavaScript動(dòng)態(tài)添加數(shù)據(jù)到表單并提交,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-06-06js中arguments,caller,callee,apply的用法小結(jié)
本篇文章只要是對(duì)js中arguments,caller,callee,apply的用法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01