一、上一篇已完成导出当前页数据。

https://blog.csdn.net/qq_45616003/article/details/118939568

二、在上一篇的基础上修改,解决多页时,只能导出当前页数据的问题

<el-button
      icon="el-icon-download"
      type="warning"
      class="excel"
      @click="exportExcel"
      >导出Excel</el-button
    >
methods: {
    //导出数据初始化及恢复原数据1、data查询条件,2、flag控制是否下载excel文件
    async pageInit(data, flag) {
      await getWorkorderPaging(data).then((res) => {
        this.pageData = res.result.data;
      });
      if (flag) {
        await this.downingExcel();
      }
    },
    //执行下载excle文件
    downingExcel() {
      /* generate workbook object from table */
      // 判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去,
      //  .Devicetablee要导出的是哪一个表格
      var fix = document.querySelector(".el-table__fixed");
      var wb;
      var dt = document.querySelector(".Devicetable");
      if (fix) {
        wb = this.$xlsx.utils.table_to_book(dt.removeChild(fix));
        dt.appendChild(fix);
      } else {
        wb = this.$xlsx.utils.table_to_book(dt);
      }
      /* get binary string as output */
      var wbout = this.$xlsx.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        //  name+'.xlsx'表示导出的excel表格名字
        this.$fileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "工单列表" + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //导出excel表格所用
    async exportExcel() {
      console.log(this.queryObj);
      //原先的页面条数
      var pageSize = this.queryObj.pageSize;
      //原先的当前页数
      var num = this.queryObj.pageNum;
      //导出所有数据的条数
      var total = this.queryObj.total;
      //判断是否有多页
      if (total > pageSize) {
        //设置导出所有数据的参数
        this.queryObj.pageNum = 1;
        this.queryObj.pageSize = total;
        //修改导出的条数
        await this.pageInit(this.queryObj, true);
        //恢复原先数据
        this.queryObj.pageNum = num;
        this.queryObj.pageSize = pageSize;
        await this.pageInit(this.queryObj, false);
      } else {
        this.downingExcel();
      }
    },
  },

三、总结

我使用了async+await使方法同步,可以更好解决接口返回数据需要时间所带来的问题,。
setTimeout虽然可以解决,但是我觉得返回数据量的多少会影响接口响应的完成时间,因此使用延时会出现一系列问题。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐