vue 文件导出（下载）

原创已于 2025-08-29 19:53:32 修改 · 4.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Excel文件导出 #前端接收excel文件流并下载

于 2019-03-20 11:37:06 首次发布

vue 同时被 2 个专栏收录

33 篇文章

订阅专栏

文件流

5 篇文章

订阅专栏

博客介绍前端实现Excel文件导出功能的方法。后台返回数据格式有两种，对应不同导出方法。一是返回url或文件名，前端拼接路径赋值给window.location.href下载；二是返回流文件，需特定处理。同时提醒设置导出接口响应类型为blob，new Blob时type字段要与后台沟通。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件的导出格式为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