如何使用axios下载文件
最近有个需求是后台返回io流,前端调用后下载。之前这种情况都是直接挂a标签解决,这次遇到的接口是post,a标签的方式行不通,面向百度后找到了解决方法。
整体思路
- 设置请求结果为blob格式,get、post相同;
- window.URL.createObjectURL(blob)方法生成唯一的对象url,通过a标签进行下载
设置请求
核心就是设置responseType: ‘blob’,具体axios设置如下:
{
url: `${baseUrl}/user/info`,
method: 'post',
responseType: 'blob',
data
}
查看返回数据不再是乱码形式的字符串,而是blob。可以通过解析blob进行文件下载。
blob格式结果下载成对应格式文件
上一步骤已经获得了接口返回的blob结果,需要通过一定方式将该结果转化成对应格式文件并进行下载。注意:此处的文件格式需要和后台统一
/**
* 通过blob请求格式下载文件
* @param {Object} data blob请求格式接口返回data
* @param {String} fileType 文件类型后缀
* @param {String} fileName 文件名
*/
function downloadByBlob(data, fileType, fileName) {
try {
let url = window.URL.createObjectURL(data);
let eleLink = document.createElement('a');
eleLink.href = url;
eleLink.download = `${fileName}.${fileType}`;
document.body.appendChild(eleLink);
eleLink.click();
window.URL.revokeObjectURL(url);
} catch (error) {
console.error('download function error!', error);
}
}
异常处理
由于返回的是blob数据类型,所以正常返回的错误对象虽然包含了错误码和错误信息,但是无法获取。需要将获取到的blob数据流转化为json格式。方法如下:
let fr = new FileReader();
fr.onload = function (e) {
const jsonRes = JSON.parse(e.target.result)
Notification({
message: jsonRes.message,
type: 'error',
title: '错误',
duration: 5 * 1000
})
}
fr.readAsText(error.response.data);