前端导出功能实现

前端导出，不需要调用后台接口后台导出，前端直接实现导出功能

导出table数据

js 引入

  import FileSaver from "file-saver";

  import XLSX from "xlsx";

table id  out-table

<el-table

      id="out-table"

      :data="tableData"

      v-loading="loading"

      style="width: 100%"

      max-height="100%"

      class="dialog-table"

      header-row-class-name="table-header"

      row-class-name="table-row"

    >    </el-table>

<el-button class="search-btn out-btn" @click="leadingOut" type="success">导出</el-button>

js代码  table 的id 需要为 out-table

leadingOut() {

      console.log("点击导出");

      this.loading=true;

      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),{raw:true});

      var wbout = XLSX.write(wb, {

        bookType: "xlsx",

        bookSST: true,

        type: "array"

      });

      try {

        FileSaver.saveAs(

          new Blob([wbout], { type: "application/octet-stream" }),

          `${this.title}.xlsx`

        );

         this.loading=false;

      } catch (e) {

        if (typeof console !== "undefined") console.log(e, wbout);

          this.loading=false;

      }

      return wbout;

    },