vue 文件导出（下载）_vue接收文件流转化为文件

文件的导出格式为excel

简单的总结一下，前段做导出功能的话都是根据后台接口返回的数据再去做相应的处理，

简单来讲，后台返回的数据格式有两种，他们分别对应不同的导出方法，如下：

第一种

后台会直接返回一个 url 或者 文件名称字符串，

前端根据约定，对后台返回的字符串进行拼接处理，从而获取到一个完整的路径url，

将这个路径赋值给 window.location.href 属性，实现下载功能

如下，后端返回的是文件名称字符串

export function download(fileName) {
  window.location.href =
    baseURL +
    "/common/download?fileName=" +
    encodeURI(fileName) +
    "&delete=" +
    true;
}

第二种

后端直接返回了流文件，就是在开发中工具 network 中类似乱码的格式，

需要如下的处理方式 

// data为服务端返回的流数据
const exportParams = (data) => {
   const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
   const fileName = '客户余额表.xlsx';
   const link = document.createElement('a');
   if (
     !!window.ActiveXObject ||
     'ActiveXObject' in window ||
      navigator.userAgent.indexOf('Edge') > -1
   ) {
      navigator.msSaveBlob(blob, fileName);
   } else {
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); // 释放URL 对象
      document.body.removeChild(link);
   }
};

上面方法中用到了Blob，想了解的话可以点这里。

需要注意的地方

1，导出接口的响应类型应设置为 blob，否则对于流文件可能无法从接口获取正确的流数据

在 vue 中设置 axios 请求参数：

responseType: 'blob'      重点关注

如果未设置responseType，可能会导致下载的文件打不开

2，new Blob 时，第二个参数可能需要与后台的响应类型一致，即 type 字段，这个需要同后台沟通

参考：

vue 文件导出（下载）时打不开、空白或者乱码的情况 - 知乎

vue前端接收excel文件流并下载_想要吐泡泡的鱼的博客-CSDN博客_前端接收excel