vue2.0 + element UI 中 el-table 数据导出Excel的方法

当使用 Vue2.0 + Element UI 开发项目时，我们有时需要将 el-table 的数据导出为 Excel 文件，以方便用户进行数据的离线查看和分析。下面是在 Vue2.0 + Element UI 中实现 el-table 数据导出 Excel 的具体步骤：

步骤一：引入文件

首先，需要引入以下文件：

<script src="//cdn.bootcdn.net/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

其中，xlsx.full.min.js 是 xlsx 库的核心文件，提供了将 Excel 文件转换为二进制流或者 JSON 格式的方法。FileSaver.min.js 则是文件下载库，用于将导出结果保存为 Excel 文件。

如果你是采用 Vue CLI 直接搭建项目的话，可以在 public/index.html 中添加上述代码；如果是手动搭建项目，则需要在页面的 head 标签中引入。

步骤二：定义导出方法

接着，我们需要在 Vue 文件中定义一个导出 Excel 的方法，如下所示：

function exportExcel(headers, data, fileName) {
  const Worksheet = XLSX.utils.json_to_sheet(data);
  const Workbook = {
    Sheets: { data: Worksheet },
    SheetNames: ["data"]
  };
  const ExcelBuffer = XLSX.write(Workbook, {
    bookType: "xlsx",
    type: "array"
  });
  const ExcelBlob = new Blob([ExcelBuffer], { type: "application/octet-stream" });
  saveAs(ExcelBlob, fileName + ".xlsx");
}

其中，headers 是表头数据，data 是表格数据，fileName 是要保存的文件名。该方法中，我们使用了 xlsx 库的 json_to_sheet 方法将数据转换为 Excel 的表格格式，然后使用 XLSX.write 方法将该表格转换为二进制流，最后使用 saveAs 方法将结果保存为 Excel 文件。

步骤三：调用导出方法

最后，在需要导出 Excel 的地方，我们可以给 el-table 绑定 el-table__body 的 ref，然后在代码中调用导出函数，如下所示：

<el-table
  :data="tableData"
  style="width: 100%"
  :ref="el => (this.tableRef = el.$refs['el-table__body'])"
>
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

<el-button @click="handleExportExcel">导出 Excel</el-button>

methods: {
  handleExportExcel() {
    const tableRef = this.$refs.tableRef.$el; // 先获取 el-table__body 的 DOM 节点
    const headers = this.$refs.tableRef.columns.map(item => item.label);
    const data = [];
    for (let i = 0, len = tableRef.children.length; i < len; i++) {
      const row = {};
      const cols = tableRef.children[i].children;
      for (let j = 0, jLen = cols.length; j < jLen; j++) {
        const cell = cols[j].querySelector(".cell");
        row[headers[j]] = cell ? cell.innerText : "";
      }
      data.push(row);
    }
    exportExcel(headers, data, "导出数据");
  }
}

在上述代码中，我们使用了 map 方法获取了表头数据，然后遍历了 el-table__body 中的每一行数据，在每一行数据中使用了 querySelector 方法获取了每一个单元格的数据，并保存在了 data 数组中。最后，我们将数据和表头传入导出函数中即可。

下面是两个示例：

示例一：只导出当前页面数据

当表格数据比较少时，可以直接将当前表格的数据导出。代码如下：

handleExportExcel() {
  const tableRef = this.$refs.tableRef.$el;
  const headers = this.$refs.tableRef.columns.map(item => item.label);
  const data = [];
  for (let i = 0, len = tableRef.children.length; i < len; i++) {
    const row = {};
    const cols = tableRef.children[i].children;
    for (let j = 0, jLen = cols.length; j < jLen; j++) {
      const cell = cols[j].querySelector(".cell");
      row[headers[j]] = cell ? cell.innerText : "";
    }
    data.push(row);
  }
  exportExcel(headers, data, "导出数据");
}

示例二：导出全部数据

当表格数据比较多时，可能需要将全部数据进行分页或者滚动加载，此时我们可以采用以下方法将全部数据导出。需要注意的是，该方法会将表格数据全部加载到内存中，可能会占用较大的内存空间，建议在数据量较小的情况下使用。代码如下：

handleExportExcel() {
  const headers = this.tableColumns.map(item => item.label);
  const data = [];
  const loadAll = async () => {
    let pageno = 1;
    let total = 1;
    while (pageno <= total) {
      const { data: tableData } = await this.getTableData(pageno, this.pageSize);
      data.push(...tableData);
      pageno++;
      total = this.totalPages;
    }
    exportExcel(headers, data, "导出数据");
  };
  loadAll();
}

在上述代码中，我们先获取了表头数据，然后定义了一个 loadAll 函数，该函数使用异步循环的方式，将全部数据加载到 data 数组中。其中，this.getTableData 是获取数据的异步方法，返回的数据格式需要为 { data: [], total: 0 }，this.pageSize 和 this.totalPages 是分页和总页数的相关属性，需要自行定义。最后，调用导出函数即可。

好了，以上就是在 Vue2.0 + Element UI 中 el-table 数据导出 Excel 的完整攻略。希望能对大家有所帮助。