后端返回的Blob是乱码怎么处理

请求导出接口，返回以下乱码

调用导出接口返回的是这一串乱码

不用质疑这个后端反的是对的，而是请求的时候浏览器没有转换过来。

只需要你在返回结果里面进行截取处理

fetch().then(response=>{
        resolve(
          checkRequestStatus(
            response,
            {
              isBlob,
              checkToken,
            }
          ));
      });

// isBlob 判断是否是blob类型，是就给true
// checkToken 判断token是否过期

//   解析请求结果
function checkRequestStatus(
  response: any,
  initOption: checkRequestType
): Promise<any> {
  const {
    isBlob,
    checkToken,
  } = initOption;
  if (response.status >= 200 && response.status < 300) {
    const responseResult = !!isBlob ? response.blob() : response.json();
    return new Promise((resolve) => {
      responseResult.then((resp: any) => {
        // 未登录或登录已过期
        if (resp?.code === 1102) {
          RouterExample && RouterExample.push('/');
          resolve({
            code: 200,
            data: null,
          });
        }
        !!isBlob
          ? resolve({
            code: 100,
            data: resp,
          })
          : resolve(resp);
      });
    });
  } else {
    // checkToken请求暂时规避此逻辑
    if (!checkToken) {
      useStorage.removeItem('token');
      RouterExample && RouterExample.push('/');
    }
    return Promise.resolve({
      data: null,
      code: response.status,
      message: response.message || 'error',
    });
  }
}

以上情况是把乱码转换成了blob类型，转换成blob类型之后进行blob处理，最后就可以下载导出的内容

也可以采用使用单个导出请求配置，采用的是axios

export function exportExcel(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url: url, // 请求地址
      params,
      responseType: "blob" // 表明返回服务器返回的数据类型
    }).then(
      (response) => {
        resolve(response);
        let fileName = "导出单据" + Date.parse(new Date()) + ".xls";
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(response, fileName);
        } else {
          let link = document.createElement("a");
 
          link.href = window.URL.createObjectURL(response);
          link.download = fileName;
          link.click();
          // 释放内存
          window.URL.revokeObjectURL(link.href);
 
        }
      },
      (err) => {
        reject(err);
      }
    );
  });
}

总结

使用以上代码也可以进行下载导出 ，当然我么肯定是需要在封装请求的时候处理这个问题，博主采用的是fetch请求，小伙伴们根据自己情况采用，这里只是提供了一个思路