vue导出excel表格-后端返回blob流文件，前端接收并导出

问题描述

我们日常做项目，特别是后台管理系统，常常需要导出excel文件。实现方式有三种

方式一（后端处理）

后端直接返回一个excel表格地址，前端点击下载即可。不过这种方式，会导致后端的excel越存越多，造成冗余。不过如果是固定模板表格内容不会变得情况下，这种方式还是不错的。当然解决方案就是后端写一个定时器，每隔一段时间清理一次

看情况

方式二（后端处理）

后端返回一个blob流文件，这样的话，是一次性的流文件，就不会造成excel越存越多。这种方式挺好

强烈推荐

方式三（前端处理）

前端保存需要导出的表格内容，然后下载并使用excel插件轮子，就可以导出了。不过众所周知，前端只是拿到数据，并展示数据的。如果表格内容比较多，或者用户对于前端速度有要求的话，或者主管老大不希望我们在项目中下载安装太多的轮子从而导致最终打包文件过大的话，这种方式就不太好

不推荐

流文件导出步骤

步骤一

在导出的接口加上声明接收参数

export const export = (params) => http("get", `api/export`, params, 'application/json; charset=UTF-8', 'arraybuffer')

步骤二

  // 导出按钮的回调函数中
  async outExcelData() {
      // 准备参数
      let params = xxx
      const res = await this.$api.export(params);
      const blob = new Blob([res]);  // 把得到的结果用流对象转一下
      var a = document.createElement("a"); //创建一个标签
      a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
      a.download = "基础工艺数据.xlsx"; //设置文件名
      a.style.display = "none";  // 障眼法藏起来a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },

总结

注意，必须要声明流文件且得到的结果用流文件转一下，这样的话，就不会出现excel文件损坏、或者乱码的情况。