vue里使用FileSaver本地下载分页表格导出

首先下载FileSaver与xlsx

导入

image.png

添加下载按钮并加事件

image.png

在table上添加id

image.png

 downloadval() {
      /* 从表生成工作簿对象  将pageSize转变成总数据条数,下载完成后再修改成默认5条数据一页*/ 
      this.pageSize = this.energysta.length;
      setTimeout(() => {
        let wb = "";
        if (this.title == "运行日报报表") {
          wb = XLSX.utils.table_to_book(
            document.querySelector("#out_table_day")
          );
        } else {
          wb = XLSX.utils.table_to_book(
            document.querySelector("#out_table_en")
          );
        }
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称 this.tablename 是表格名  this.title为表格类型 需求为xlsx表格 按需写
            this.tablename + this.title + ".xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
//修改成默认一页条数
        this.pageSize = 5;
        return wbout;
      }, 100);
    }