前端实现后端post请求返回的数据流下载excel显示无法打开，axiox请求封装加responseType属性

 今天做需求又是平平无奇的导出，以往项目框架里都是后端的get请求导出，

然后前端直接window.open(`地址 ', '_self')就可以实现下载了，

而今天突然来了个post请求的导出，直接用原来封装的post请求下载后获取的数据流

  非常尴尬的情况出现了

看一下现在导出的代码

this.props.dispatch({
  type: 'homePage/exportDeptRecordQuality',
  payload: {
    startTime: startTime || '2022-08-01',
    endTime: endTime || '2023-08-01',
  },
}).then((res: any) => {
  if (res) {
    console.log(res, 'res')
    const datas = res;
    const url = window.URL.createObjectURL(new Blob([datas], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }))
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url;
    link.setAttribute('download', '病历基本信息报表22');
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link);
  }
})

 看了一下现在的项目请求封装是umi自带的，没有用老朋友axiox    

 猜测原因也许可能是没代入responseType: 'arraybuffer'（ps：不确定umi框架中的请求封装是否有这个字段的判断值，有网友了解可以指出学习一下嘿嘿）

import { extend } from 'umi-request';
//更详细的 api 文档: https://github.com/umijs/umi-request

 这时候决定重新用老朋友axiox给他封个post请求 

 记得带上responseType: 'arraybuffer'

直接上代码  request.js 封装post请求

// 网络请求配置
import axios from "axios";
import { message } from 'antd'
axios.defaults.withCredentials = true;

// http request 拦截器
axios.interceptors.request.use(
  (config) => {
    config.data = JSON.stringify(config.data);
    config.headers = {
      "Content-Type": "application/json",
    };
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// http response 拦截器
axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    console.log("请求出错：", error);
  }
);

// 封装post请求
export function post(url, data, config) {
  return new Promise((resolve, reject) => {
    console.log(url, data, config)
    axios.post(url, data, config).then(
      (response) => {
        //关闭进度条
        resolve(response.data);
      },
      (err) => {
        reject(err);
      }
    );
  });
}

 请求调用函数封装 service.js'

很关键的来了！！！记得加入 responseType: 'arraybuffer

import { post } from "../../utils/request";

export function downTem(data: any) {
  console.log(data, 'data')
  return post(`${getServerPath()}/emr/exportDeptRecordQuality`, data, { responseType: 'arraybuffer' });
}

页面调用

downTem(data).then((res) => {
  const datas = res;
  const url = window.URL.createObjectURL(new Blob([datas], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url;
  link.setAttribute('download', '病历基本信息报表');//文件名
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link);
})

成功导出打开文件