当前位置：首页 > article >正文

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

article 2025/2/27 17:46:52

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

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

修改接口请求的responseType

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

下载返回的流文件

 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)
   }
 }