有时我们会遇到下载/导出接口返回的是二进制流文件。这些二进制流文件可相应的变成图片、pdf、excel、zip文件等。
下面就说这些该怎么配置:
在接口请求的时候设置请求的responseType类型, 设置该值能够改变响应类型(重要),告诉服务器你期望的响应格式。
Blob在mdn上的解释是Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。就是英文Binary large Object,mysql有此类型数据结构。
let blog = new Blob(array, options);
Blob() 构造函数返回一个新的 Blob 对象。
array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8。
options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:
**type**,默认值为 "",它代表了将会被放入到blob中的数组内容的**MIME**类型。
axios.post(url, params, {timeout: 1000,responseType: 'blob'})
.then(res => {
console.log(res);
})
.catch(err=> {
console.log(err);
})
})
// 或者
axios.post(url, params, {timeout: 1000,responseType: 'arraybuffer '})
.then(response=> {
//将从后台获取的图片流进行转换
return 'data:image/png;base64,' + btoa(
new Uint8Array(response.data).reduce((data, byte) => data +
String.fromCharCode(byte), '')
)
})
.catch(err=> {
console.log(err);
})
})
或者
export function downLoad(data) {
return request({
url: 'xxxxxx',
method: 'post',
data: data,
responseType: 'arraybuffer'
// responseType: 'blob'
}).then((response) => {
// 处理返回的文件流
// 若是video 设置
// let blob = new Blob([res], {type: 'video/mpeg4'});
// 若是pdf设置
// const blob = new Blob([response],{type: 'application/pdf'})
let blob = new Blob([response.data], {type: 'application/zip'})
let filename = data.filename + '.zip'
let link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = filename
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(blob)
document.body.removeChild(link)
})
}
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});// 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
let fileName = decodeURI(res.headers['content-disposition']);// 设置文件名称,decodeURI:可以对后端使用encodeURI() 函数编码过的 URI 进行解码。encodeURI() 是后端为了解决中文乱码问题
if (fileName) {// 根据后端返回的数据处理文件名称
fileName = fileName.substring(fileName.indexOf('=') + 1);
}
const link = document.createElement('a')// 创建一个a标签
link.download = fileName;// 设置a标签的下载属性
link.style.display = 'none';// 将a标签设置为隐藏
link.href = URL.createObjectURL(blob);// 把之前处理好的地址赋给a标签的href
document.body.appendChild(link);// 将a标签添加到body中
link.click();// 执行a标签的点击方法
URL.revokeObjectURL(link.href) // 下载完成释放URL 对象
document.body.removeChild(link)// 移除a标签