使用axios下载后端接口返回的文件流格式文件

在实际开发中，我们经常会遇到下载文件的需求，一般情况下接口最好的处理方式为上传到文件对象存储服务器，然后给前端返回一个下载文件的URL，前端直接打开链接下载就可以了，但…在下载数据量大且参数复杂的情况下，不排除后端接口使用POST请求直接返回文件流格式的数据，这时候前端要下载就比较麻烦了

目前前端领域大多项目都使用三大框架，接口请求也大多使用axios，于是我便记录一下如何使用axios来下载后端返回的文件流格式的文件

1. 修改接口请求的responseType

export downloadApi = (params) => {return axios.post(`/download/file`, params, {responseType: 'blob'})
}

2. 下载返回的流文件

 const downloadFile = () => {const downloadParams = {} // 这里是下载接口请求参数try {downloadApi(downloadParams).then((res) => {  // res为后端返回的文件流，浏览器network看到接口返回的是乱码const blob = new Blob([res]);const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);let a = document.createElement("a");a.download = '这里是下载的文件名称';// 创建二进制对象a.href = downloadURL;// 模拟点击a.click();//释放资源并删除创建的a标签URL.revokeObjectURL(downloadURL);// a.href});} catch(e) {Promise.reject(e)}}

好了，现在在点击下载按钮事件中调用下载方法就可以啦~