javascript下載文件5種方式實例詳解
前言
整理javascript下載文件五種方式,接收后臺返回流下載或直接下載文件。歡迎補充~
業(yè)務(wù)場景
假設(shè)通過后端接口返回的流,需要前端點擊【下載到本地】按鈕下載文件。
一.window.location.href下載
最簡單的方式:url即文件或接口地址,額外參數(shù)通過url后問號拼接參數(shù),后端get請求方式接收。
let url='http://10.0.0.103:6767/file/downloadFile' window.location.href = url
缺陷:1.直接訪問可能會覆蓋當(dāng)前頁面地址,影響用戶體驗。
2.圖片、pdf 等url資源會表現(xiàn)為預(yù)覽而非下載。
二.window.open()下載
用指定的名稱將指定的資源加載到瀏覽器上下文(窗口 window ,內(nèi)嵌框架 iframe 或者標(biāo)簽 tab )。如果沒有指定名稱,則一個新的窗口會被打開并且指定的資源會被加載進這個窗口的瀏覽器上下文中。url為后端提供的文件下載路徑
let url='http://10.0.0.103:6767/file/downloadFile' window.open(url);
缺陷:這個方法只能將指定路徑的資源加載到瀏覽器里面,如果文件不能被瀏覽器瀏覽,那就會被瀏覽器下載到本地。反之,如果下載一個txt文本,用該方法會直接預(yù)覽txt文件。
三.iframe 下載
和創(chuà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); } }
四.【動態(tài)a標(biāo)簽】結(jié)合【axios方法】的方式下載
-axios請求將后端給的文件流下載下來
-若該接口有登錄校驗,將下載的文件流轉(zhuǎn)換成blob數(shù)據(jù),反之不需要這一步
-通過window.URL.createObjectURL(blob)將blob轉(zhuǎn)化成url
-通過動態(tài)生成a標(biāo)簽,模擬點擊下載事件
-完成下載動作
1.若/getZipInfo接口沒有登錄校驗,就不用下載文件流轉(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)簽進行自動點擊下載,下載完后移除按鈕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接口有登錄校驗,就需要把下載文件流轉(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)簽進行自動點擊下載,下載完后移除按鈕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ī)定一個名稱或一個關(guān)鍵詞,指示在何處打開 action URL, * 即在何處顯示提交表單后接收到的響應(yīng)。 * *_blank 在新窗口/選項卡中打開。 *_self 在同一框架中打開。(默認(rèn)) *_parent 在父框架中打開。 *_top 在整個窗口中打開。 *framename 在指定的 iframe 中打開。 */ form.attr("target", "_self"); form.attr("method", "get"); form.attr("action", url); $("body").append(form); // 提交 form.submit(); }
注意: 若下載的文件包解壓時需要密碼的話,前后端生成的文件名必須一致才能解壓,否則無法會導(dǎo)致解壓失敗。
總結(jié)
到此這篇關(guān)于javascript下載文件5種方式的文章就介紹到這了,更多相關(guān)js下載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實現(xiàn)的多種鼠標(biāo)拖放效果
這篇文章主要介紹了JavaScript實現(xiàn)的多種鼠標(biāo)拖放效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)變換頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11關(guān)于獲取DIV內(nèi)部內(nèi)容報錯的原因分析及解決辦法
這篇文章主要介紹了關(guān)于獲取DIV內(nèi)部內(nèi)容報錯的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-01-01Bootstrap Table服務(wù)器分頁與在線編輯應(yīng)用總結(jié)
這篇文章主要介紹了Bootstrap Table服務(wù)器分頁與在線編輯應(yīng)用總結(jié) 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08JavaScript動態(tài)添加數(shù)據(jù)到表單并提交的幾種方式
這篇文章主要介紹了JavaScript動態(tài)添加數(shù)據(jù)到表單并提交,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-06-06js中arguments,caller,callee,apply的用法小結(jié)
本篇文章只要是對js中arguments,caller,callee,apply的用法進行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01