vue 项目导出excel

在项目中有前端下载后端文件的需求，一般有以下两种方式
1.后端返回一个路径，直接下载
2.后端返回文件流，前端进行转化后下载

1.返回路径的情况
直接把路径给到a标签进行下载即可

  const downloadUrl = `file/path/`;
  function download(url) {
       const a = document.createElement('a');
       a.style.display = 'none';
       a.href = url;
       a.download = 'filename.xlsx';
       a.click();
       document.body.removeChild(a);
       }
  download(downloadUrl);

2. 返回数据流的情况
   使用Blob 数据下载, Blob 对象表示一个不可变、原始数据的类文件对象

axios({
  method: 'post',
  url: '/export',
  responseType: 'blob',
})
.then(res => {
  // 假设 data 是返回来的二进制数据
  const data = res.data
  const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', 'excel.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)blob
})

使用这种方法还有一个关键点是设置 responseType: 'blob'，设置生效后打印 res 会显示 blob

坑点：如果在项目中使用了mock数据，responseType: 'blob'设置可能会不生效，这个时候取消掉mock即可。