1. 背景

使用post请求，调用后端导出文件的接口，返回内容是文件流，如图

2. 问题

这种接口不能以常规方式去处理，因为返回的不是application/json，而是application/force-download，如图

3. 处理

3.1 请求时处理

这里是用axios做请求，首先还是和其他接口一样去发送请求，只不过需要给axios加一个responseType: 'blob'的属性，关于responseType的解释，可以参考axios文档

3.2 返回时处理

 如果顺利，接收到的就是一个Blob类型的数据，做如下处理

/**
 * 下载文件
 */
export function downBlob(blobData: Blob, fileName: string) {
  // 下载地址
  const downUrl = window.URL.createObjectURL(blobData);

  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = downUrl;
  a.target = '_blank';
  if (fileName) {
    a.download = fileName;
  }
  document.body.appendChild(a);
  a.click();
  a.remove();
  window.URL.revokeObjectURL(downUrl); // 释放掉blob对象
}

/**
 * blob数据流处理
 */
function handleBlob(blobData: Blob, rspHeaders: any) {
  // 文件名
  const disposition = decodeURI(rspHeaders.get('content-disposition'));
  const fileName: string = disposition ? disposition.split('=')[1] : '导出文件.xlsx';

  downBlob(blobData, fileName);
  return true;
}

/**
 * 响应拦截器
 */
axios.interceptors.response.use((rsp) => {
    const rspData = rsp.data || {};

    // 处理blob文件流
    if (rspData instanceof Blob) {
        return handleBlob(rspData, rsp.headers);
    }

    // 正常数据，直接返回
    return rspData;
});