需求:
后端文件以二進制流的形式返回給前端, 前端需要讀取流文件實現文件下載。
場景:
下載成功,文件亂碼。
原因:
與后臺交互時,若后臺返回的是二進制流數據,前端請求時要加上{responseType:‘blob’}或者是{responseType: ‘arraybuffer’},這樣數據就不是亂碼了。
eg:
// 發送請求
export function reqFuc(params) {
return request({
url: '/xxxxx/down', // 接口
method: 'post', // 看后端設計的是什么類型
responseType: 'blob', // 注意:這里必須指定返回類型,否則打不開文件
params
})
}
// 數據處理
downloadFn(params) {
reqFuc(params)
.then(res => {
console.log(res)
var content = res.data // 后端返回的流
var data = new Blob([content], {
type: 'application/x-download;charset=UTF-8'
})
var downloadUrl = window.URL.createObjectURL(data)
var anchor = document.createElement('a')
anchor.href = downloadUrl
anchor.setAttribute('download', _fileName)
anchor.click()
})
.catch(err => {
console.log(err)
})