关于javascript: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></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 文件损坏、或者乱码的状况。