需求:
后端文件以二进制流的形式返回给前端, 前端需要读取流文件实现文件下载。
场景:
下载成功,文件乱码。
原因:
与后台交互时,若后台返回的是二进制流数据,前端请求时要加上{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)
})