axios下载文件（图片\压缩包等）

前情提要

需求：下载一些blob类型的文件类，如压缩包，图片，pdf等等。

下载图片，使用a.link的方式只会打开图片而不会下载，除非返回头中设置content-type，让浏览器知道是下载的资源。

本文介绍的是主动下载，url换成图片资源，不用设置content-type一样可以下载。

总结

axios({
  url: "",//接口
  method: 'GET',
  responseType: 'blob', //重要 
  headers:{
      'X-Token':store.getters.token,//有需要token的在这传
  },
  params:{
      //'album_id':this.currentId,//携带自定义数据
  }
}).then((response) => {
  console.log('res',response)
  if (response.data.type === 'application/json') {
      // 创建一个读取器来转换Blob为JSON
      const reader = new FileReader();
      reader.readAsText(response.data);
      reader.onload = () => {
          const jsonResponse = JSON.parse(reader.result);
          console.log('jsonResponse',jsonResponse)//自定义的错误或其他信息
          if (jsonResponse.status === 400) {
              // 处理自定义错误消息
              console.log('Custom Error Message:', jsonResponse.message);
              this.$message.warning(jsonResponse.message)   
          }
      };
  } else {
      //创建一个链接DOM节点
      const link = document.createElement('a');
      // 创建一个新的Blob对象
      const blob = new Blob([response.data]);
      // 创建blob链接
      link.href = window.URL.createObjectURL(blob);
      link.download = "活动相册.zip";//下载的文件名加后缀 可自定义
      // 隐藏DOM节点
      link.style.display = 'none';
      // 将链接节点添加到DOM中
      document.body.appendChild(link);
      // 模拟点击下载
      link.click();
      // 移除DOM节点
      document.body.removeChild(link);
  }
  
}).catch((error) => {
  console.error('下载文件时发生错误：', error.response);
});

细节

axios的配置

axios({
  url: "",//接口
  method: 'GET',
  responseType: 'blob', //重要 
  headers:{
      'X-Token':store.getters.token,//有需要token的在这传
  },
  params:{
      //'album_id':this.currentId,//携带自定义数据
  }
})

• responseType //不写 默认配置json

正常接口返回json数据，axios会处理解析，在response.data中可以拿到

此处值为Blob,让axios接受blob类文件，如果不写，就算下载来，也会显示损坏。

then中设置

我的代码演示的是提交图片相册并下载压缩包，所以难免有报错一类的自定义错误，3xx、5xx等响应码可以在catch中获取，但是自定义的错误，比如传错Id等等，需要手动处理，但因为设置了responseType，不能通过普通方式获取本来的json格式数据。需要手动转换。

if (response.data.type === 'application/json') {
      // 创建一个读取器来转换Blob为JSON
      const reader = new FileReader();
      reader.readAsText(response.data);
      reader.onload = () => {
          const jsonResponse = JSON.parse(reader.result);
          console.log('jsonResponse',jsonResponse)//自定义的错误或其他信息
          if (jsonResponse.status === 400) {
              // 处理自定义错误消息
              console.log('Custom Error Message:', jsonResponse.message);
              this.$message.warning(jsonResponse.message)   
          }
      };
  }

代码演示的是自定义返回了对象数据中status==400,也有报错信息message。

这一段可以写在响应拦截器中，这里为了方便不作演示。

设置a标签下载

上面的流程都走完后，获取到正确的后端返回数据后，就要选择使用blob处理方式下载文件。

  //创建一个链接DOM节点
  const link = document.createElement('a');
  // 创建一个新的Blob对象
  const blob = new Blob([response.data]);
  // 创建blob链接
  link.href = window.URL.createObjectURL(blob);
  link.download = "活动相册.zip";//下载的文件名加后缀
  // 隐藏DOM节点
  link.style.display = 'none';
  // 将链接节点添加到DOM中
  document.body.appendChild(link);
  // 模拟点击下载
  link.click();
  // 移除DOM节点
  document.body.removeChild(link);

此处的link.download需要名字+类型后缀，可以让后端一起返回给你，自己组装，好自定义操作，没有的话手动指定。没有后缀会以txt格式下载并可能导致文件损坏。