axios 导出excel---提示文件损坏解决方案

没有使用Mock时解决办法

axios请求部分

将 responseType 设置为 ‘blob’或’arraybuffer’

responseType类型
详细讲解

export function DowExcle(data) {
  return requestServer({
    headers: {
      'Content-Type': 'application/json; application/octet-stream'
    },
    url: '/excel/export/',
    method: 'get',
    responseType: 'blob'
  })
}

下载文件部分

deviceDowExcle().then((res) => {

  console.log(res);
  
  const fileName = res.headers['content-disposition'].split("'")[2];
  
  const _res = res.data;
  
  const blob = new Blob([_res]);
  
  const downloadElement = document.createElement('a');
  
  const url = window.URL || window.webkitURL || window.moxURL
  
  const href = url.createObjectURL(blob); // 创建下载的链接
  
  downloadElement.href = href;
  
  downloadElement.download = decodeURI(fileName); // 下载后文件名

  document.body.appendChild(downloadElement);

  downloadElement.click(); // 点击下载

  document.body.removeChild(downloadElement); // 下载完成移除元素

  url.revokeObjectURL(href); // 释放掉blob对象
});

使用了Mock模块时解决办法

原因

使用了Mockjs后会对responseType 进行初始化，所以一直设置不上responseType

解决方案

1. 停止使用Mock数据，删除对Mock的引用

2. 改下源码 mockjs - dist - mock.js 8362行下面加一行代码

    this.custom.xhr.responseType = this.responseType