Element 將表格中的數據導出

1、需求（需要將查詢的數據導出）

 

 

 2、代碼

<!-- 表格 -->
    <el-table
      id="out-table"
      :data="data.slice((currentPage - 1) * limit, currentPage * limit)"
      style="width: 100%;"
      tooltip-effect="dark"
      stripe
      height="520"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="datetime" label="日期" fixed>
        <template slot-scope="scope">
          <span>{{ scope.row.datetime }}</span>
        </template>
      </el-table-column>
      <!-- 詳細信息 -->
      <el-table-column
        v-for="(item, index) in tableHead"
        :label="item"
        :key="index"
      >
        <template slot-scope="scope">
          {{ scope.row.data[item] }}
        </template>
      </el-table-column>
    </el-table>
<!-- 導出 -->
<el-button type="primary" icon="el-icon-download" @click="downloadExcel">導出</el-button>

<!-- 分頁 -->
    <div class="block page1" v-show="isFlag">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 30, 45, 60]"
        :page-size="limit"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>

　　

data() {
    return {
      data: [],
      tableHead: [],
      deviceList: [],
      getAllData: [],
      limit: 15, //每頁顯示15條數據
      currentPage: 1, //當前頁，從第一頁開始
      total: 0, //總條目數
      multipleSelection: [], //選中的數據
      excelData: []
    };
  },

// 分頁------每頁條數切換
    handleSizeChange(val) {
      this.limit = val;
    },

 // 當前頁改變時觸發
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      // console.log(`當前頁: ${val}`);
    },

 

數據寫入

downloadExcel() {
      this.$confirm("確定下載列表文件?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.excelData = this.multipleSelection;
          this.exportExcel();
        })
        .catch(() => {});
    },
    // 數據寫入Excel
    exportExcel(){
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
        /* 獲取二進制字符串作為輸出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 對象表示一個不可變、原始數據的類文件對象。
            //Blob 表示的不一定是JavaScript原生格式的數據。
            //File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。
            //返回一個新創建的 Blob 對象，其內容由參數中給定的數組串聯組成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //設置導出文件名稱
            "歷史記錄.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        },

選中表數據：

// 選中的表的數據
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },