[vue] axios导出后端excel文件流处理

get请求

export const exportData = (params) => axios({
  url: url,
  method: 'get',
  responseType: 'blob',
  autoRes: true,
  params,
}).then((res) => res);

或者post请求

export const exportData = (data) => axios({
  url: url,
  method: 'post',
  responseType: 'blob',
  autoRes: true,
  data,
}).then((res) => res);

vue

const params = {
  name: this.name,
  age: this.age,
};
exportData(params).then((res) => {
  const blob = new Blob([res], {
    type: 'application/vnd.ms-excel;',
  });
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  const format = new Date().getTime();
  link.download = `${format}.xlsx`;
  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(link.href);
  document.body.removeChild(link);
});

如果下载之后会遇到文件无法打开的情况

经过排查是 mock.js 都会影响返回的数据，需要修改大约 8362 行出的代码

if (!this.match) {
    // 设置为原始的 xhr 响应
    this.custom.xhr.responseType = this.responseType
    this.custom.xhr.send(data)
    return
}