Javascript前端下載后臺(tái)傳來(lái)的文件流代碼實(shí)例
前臺(tái)請(qǐng)求數(shù)據(jù)：
url: '/app/downloadApp', method: 'get', responseType: 'blob', params: data
設(shè)置接收參數(shù)格式為responseType: ‘blob',
downloadFile(res, fileName) {
if (!res) {
return
}
if (window.navigator.msSaveBlob) { // IE以及IE內(nèi)核的瀏覽器
try {
window.navigator.msSaveBlob(res, fileName) // res為接口返回?cái)?shù)據(jù)，這里請(qǐng)求的時(shí)候已經(jīng)處理了，如果沒處理需要在此之前自行處理var data = new Blob([res.data]) 注意這里需要是數(shù)組形式的,fileName就是下載之后的文件名
// window.navigator.msSaveOrOpenBlob(res, fileName); //此方法類似上面的方法，區(qū)別可自行百度
} catch (e) {
console.log(e)
}
} else {
let url = window.URL.createObjectURL(new Blob([res]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)// 文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下載完成移除元素
window.URL.revokeObjectURL(url) // 釋放掉blob對(duì)象
}
},
download(){
var data = {
appId:this.appId
}
downloadAppAjax(data).then(res => {
const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
console.log(filename)
this.downloadFile(res.data,filename)
})
}
這里的downloadAppAjax調(diào)用后臺(tái)接口，請(qǐng)求數(shù)據(jù)，獲取后臺(tái)返回的數(shù)據(jù)沒有文件名，最后發(fā)現(xiàn)在header Content-Disposition屬性里 attachment;filename=app.jpg
所以我們要實(shí)現(xiàn)下載自動(dòng)重命名就需要拿出filename，這里我們使用decodeURI對(duì)Content-Disposition屬性值進(jìn)行解碼，拿到filename:
decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
拿到文件流和文件名后 接收文件流并創(chuàng)建地址
let url =window.URL.createObjectURL(new Blob([res]))
接著利用a標(biāo)簽進(jìn)行下載即可。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了通過(guò)js來(lái)判斷iframe里的頁(yè)面是否加載完成,需要的朋友可以參考下2014-06-06
JavaScript是如何實(shí)現(xiàn)繼承的(六種方式)
大多OO語(yǔ)言都支持兩種繼承方式： 接口繼承和實(shí)現(xiàn)繼承 ，而ECMAScript中無(wú)法實(shí)現(xiàn)接口繼承，ECMAScript只支持實(shí)現(xiàn)繼承，而且其實(shí)現(xiàn)繼承主要是依靠原型鏈來(lái)實(shí)現(xiàn)，下文給大家技術(shù)js實(shí)現(xiàn)繼承的六種方式，需要的朋友參考下2016-03-03
JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果
這篇文章主要介紹了JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果,涉及JavaScript針對(duì)頁(yè)面元素的遍歷及樣式動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
使用JavaScript通過(guò)前端發(fā)送電子郵件
這篇文章主要介紹了使用JavaScript通過(guò)前端發(fā)送電子郵件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
小程序相信大家應(yīng)該都很熟悉了,對(duì)于小程序的整個(gè)運(yùn)營(yíng)的方法,很多運(yùn)營(yíng)都比較關(guān)注,今天希望通過(guò)一個(gè)思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于小程序中如何繪制思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要為大家介紹了JavaScript中Promise的使用，本文先介紹 Promises 相關(guān)規(guī)范，然后再通過(guò)解讀一個(gè)迷你的 Promises 以加深理解，感興趣的小伙伴們可以參考一下2016-01-01
JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法,涉及JavaScript操作頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-03-03
今天小編就為大家分享一篇layui寫后臺(tái)表格思路和賦值用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過(guò)程解析
這篇文章主要介紹了微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
原生js三級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇原生js三級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06