Javascript前端下載后臺傳來的文件流代碼實例
更新時間：2020年08月18日 15:58:37 作者：niniHan
這篇文章主要介紹了Javascript前端下載后臺傳來的文件流代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
前臺請求數(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為接口返回數(shù)據(jù)，這里請求的時候已經(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對象
}
},
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)用后臺接口，請求數(shù)據(jù)，獲取后臺返回的數(shù)據(jù)沒有文件名，最后發(fā)現(xiàn)在header Content-Disposition屬性里 attachment;filename=app.jpg
所以我們要實現(xiàn)下載自動重命名就需要拿出filename，這里我們使用decodeURI對Content-Disposition屬性值進行解碼，拿到filename:
decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
拿到文件流和文件名后 接收文件流并創(chuàng)建地址
let url =window.URL.createObjectURL(new Blob([res]))
接著利用a標(biāo)簽進行下載即可。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了通過js來判斷iframe里的頁面是否加載完成,需要的朋友可以參考下2014-06-06
JavaScript是如何實現(xiàn)繼承的(六種方式)
大多OO語言都支持兩種繼承方式： 接口繼承和實現(xiàn)繼承 ，而ECMAScript中無法實現(xiàn)接口繼承，ECMAScript只支持實現(xiàn)繼承，而且其實現(xiàn)繼承主要是依靠原型鏈來實現(xiàn)，下文給大家技術(shù)js實現(xiàn)繼承的六種方式，需要的朋友參考下2016-03-03
JS實現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果
這篇文章主要介紹了JS實現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果,涉及JavaScript針對頁面元素的遍歷及樣式動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了使用JavaScript通過前端發(fā)送電子郵件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
小程序相信大家應(yīng)該都很熟悉了,對于小程序的整個運營的方法,很多運營都比較關(guān)注,今天希望通過一個思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于小程序中如何繪制思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要為大家介紹了JavaScript中Promise的使用，本文先介紹 Promises 相關(guān)規(guī)范，然后再通過解讀一個迷你的 Promises 以加深理解，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了JS實現(xiàn)圖片平面旋轉(zhuǎn)的方法,涉及JavaScript操作頁面元素樣式動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-03-03
今天小編就為大家分享一篇layui寫后臺表格思路和賦值用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過程解析
這篇文章主要介紹了微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
下面小編就為大家?guī)硪黄鷍s三級聯(lián)動的簡單實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06