如何使用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);