vue+element-ui的table数据导出到excel中

一、安装依赖

npm install --save xlsx file-saver

二、将FileSaver、XLSX挂载在Vue的原型上

import FileSaver from "file-saver";
import XLSX from "xlsx";

Vue.prototype.$fileSaver = FileSaver
Vue.prototype.$xlsx = XLSX

三、el-button、el-table、exportExcel

<el-button
      icon="el-icon-download"
      type="warning"
      class="excel"
      @click="exportExcel"
      >导出Excel</el-button
    >
     <el-table
      class="roomtable"
      height="70vh"
      :data="pageData"
      :row-class-name="tableRowClassName"
      :default-sort="{ prop: 'name', order: 'descending' }"
      :header-cell-style="{
        textAlign: 'center',
        'background-color': '#54657f',
        color: '#fff',
        height: '40px',
        'line-height': '40px',
        padding: '0',
      }"
      :cell-style="{
        textAlign: 'center',
        'font-size': '14px',
        height: '40px',
        padding: '0',
        'max-height': '40px',
        color: '#3F4A56',
        'text-overflow': 'ellipsis',
        'white-space': 'nowrap',
        overflow: 'hidden',
      }"
    >
      <el-table-column
        fixed
        prop="name"
        label="机房名称"
        width="150"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="deviceNum"
        label="设备数"
        width="100"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="onlineDeviceNum"
        label="在线设备数"
        width="120"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="alarmNum"
        label="告警数"
        width="100"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <a href="#/realtimealarm">
            <el-tag
              v-if="scope.row.alarmNum > 0"
              effect="light"
              type="danger"
              style="color: #eb154a"
              >{{ scope.row.alarmNum }}</el-tag
            >
            <el-tag v-else type="info">{{ scope.row.alarmNum }}</el-tag>
          </a>
        </template>
      </el-table-column>
      <el-table-column
        prop="responser"
        label="负责人"
        width="100"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="机房位置"
        width="100"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="projectName"
        label="所属项目"
        width="100"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="creationDate"
        label="创建时间"
        width="141"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="操作" min-width="220" fixed="right">
        <template slot-scope="scope">
          <el-link
            @click="view(scope.row)"
            :underline="false"
            style="margin-left: 8px; color: #2eaae0"
            v-if="!projectObj.viewProjectInfo"
            >详情</el-link
          >
          <el-link
            @click="edit(scope.row)"
            :underline="false"
            style="margin-left: 8px; color: #2eaae0"
            >修改</el-link
          >
          <el-link
            @click="del(scope.row)"
            :underline="false"
            style="margin-left: 8px; color: #2eaae0"
            >删除</el-link
          >
          <el-link
            @click="addDevice(scope.row)"
            :underline="false"
            style="margin-left: 8px; color: #67c23a"
            >添加设备</el-link
          >
        </template>
      </el-table-column>
      <!-- <el-table-column prop="info" label="详情"> </el-table-column> -->
    </el-table>

methods: {
//导出excel表格所用
    exportExcel() {
      /* generate workbook object from table */
      // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
      //  .roomtable要导出的是哪一个表格
      var fix = document.querySelector(".el-table__fixed");
      var wb;
      var dt= document.querySelector(".roomtable")
      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;
    },
 }

注意：对document.querySelector(".el-table__fixed")进入判断解决了数据导出时重复。