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

本文介绍: 在实际开发中，我们经常会遇到下载文件的需求，一般情况下接口最好的处理方式为上传到文件对象存储服务器，然后给前端返回一个下载文件的URL，前端直接打开链接下载就可以了，但…在下载数据量大且参数复杂的情况下，不排除后端接口使用POST请求直接返回文件流格式的数据，这时候前端要下载就比较麻烦了。目前前端领域大多项目都使用三大框架，接口请求也大多使用 axios，于是我便记录一下如何使用axios来下载后端返回的文件流格式的文件。好了，现在在点击下载按钮事件中调用下载方法就可以啦~

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

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

修改接口请求的responseTy pe

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

下载返回的流文件

 const downloadFile = () =&gt; {
   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)
   }
 }