后端返回文件流，前端下载文件

一、请求时做一些处理

export const exportCodeTable = (params = {}) => {
  return http({
    url: api.exportCodeTable,
    method: "get",
    params,
    responseType: "blob",
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
};

二、向后端发送请求
在向后端发送请求之前封装一个处理文件流并自动下载文件的方法

export function downLoadXls(res) {
  const fileNames = res.headers["content-disposition"];
  if (fileNames) {
    //解码
    const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1]);
    // 处理返回的文件流
    const content = res.data;
    const blob = new Blob([content], {
      type: "application/octet-stream; charset=utf-8",
    });
    if ("download" in document.createElement("a")) {
      //非IE下载
      const a = document.createElement("a"); //创建一个a标签
      a.download = fileName; //指定文件名称
      a.style.display = "none"; //页面隐藏
      a.href = URL.createObjectURL(blob); // href用于下载地址
      document.body.appendChild(a); //插到页面上
      a.click(); //通过点击触发
      URL.revokeObjectURL(a.href); //释放URL 对象
      document.body.removeChild(a); //删掉a标签
    } else {
      //IE10 + 下载
      navigator.msSaveBlob(blob, fileName);
    }
  }
}

三、出现获取res.headers["content-disposition"]的问题解决方法
1、检查后端是否设置header

Access-Control-Expose-Headers: Content-Disposition 其作用是在服务端向外部暴露header中的 Content-Disposition
2、检查前端响应拦截器是否返回res (headers是res的属性)
一般我们返回的是res.data这里需要一个判断是否为blob的方法

function isBlob(val) {
  return toString.call(val) === "[object Blob]";
}

 (res) => {
    if (!isBlob(res.data)) {
      return res.data;
    }  else return res;
  },