vue项目导出excel功能实现

197 阅读1分钟

今天项目项目需要加一个讲element-ui表格导出为excel的按钮功能,其实之前已经有这个功能了,顺着他们之前的思路,特地来记录一下

我们项目实现的思路是将选中的数据的某个唯一值和一个与后端定义好的一个字段,这个字段用来确定当前要导出的列表是哪一个,听过post请求发送给后端,后端接受到以后就会查询到相应的文件,将这些文件转化成流媒体的格式,返回给前端,前端再通过这些流媒体文件构造一个Blob函数,将返回的数据传递回来,再设置一些参数,就能实现excel表格的下载。

以下是具体的点击事件的代码

exportExcel(){
      var para = this.sels.map(item => item.id);
      // let para = cardCodes.toString().replace(/,/g, "#");
      if (para.length == 0) {
        this.$alert("请选择需要导出的会员卡");
      } else {
        let url = this.$apiUrl + "/getExcel";
        this.$http({
          method: "post",
          url: url,
          responseType: "blob",
          data: {
            ids: para,
            originFrom: "memberCard"
          },
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        }).then(data => {
          let blob = new Blob([data.data], {
            type: "application/vnd.ms-excel"
          });
          if (!data) {
            return;
          }
          let url = window.URL.createObjectURL(blob);
          let link = document.createElement("a");
          let filename =
            "会员卡报表(" + this.$util.formatTime(new Date().getTime()) + ").xls";
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", filename);
          document.body.appendChild(link);
          link.click();
          window.URL.revokeObjectURL(url);
        });
      }
    },