溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Javascript前端下載后臺傳來的文件流案例分析？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
前臺請求數據：
url: '/app/downloadApp', method: 'get', responseType: 'blob', params: data
設置接收參數格式為responseType: ‘blob',
downloadFile(res, fileName) {
if (!res) {
return
}
if (window.navigator.msSaveBlob) { // IE以及IE內核的瀏覽器
try {
window.navigator.msSaveBlob(res, fileName) // res為接口返回數據，這里請求的時候已經處理了，如果沒處理需要在此之前自行處理var data = new Blob([res.data]) 注意這里需要是數組形式的,fileName就是下載之后的文件名
// window.navigator.msSaveOrOpenBlob(res, fileName); //此方法類似上面的方法，區別可自行百度
} 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調用后臺接口，請求數據，獲取后臺返回的數據沒有文件名，最后發現在header Content-Disposition屬性里 attachment;filename=app.jpg
所以我們要實現下載自動重命名就需要拿出filename，這里我們使用decodeURI對Content-Disposition屬性值進行解碼，拿到filename:
decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
拿到文件流和文件名后 接收文件流并創建地址
let url =window.URL.createObjectURL(new Blob([res]))
接著利用a標簽進行下載即可。
感謝各位的閱讀！看完上述內容，你們對Javascript前端下載后臺傳來的文件流案例分析大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
