纯前端使用 Vue.js 和 Element UI 实现表格导出功能

在这篇博文中，我将演示如何使用 Vue.js 和 Element UI 创建一个包含选择列、序号、姓名、年龄、城市和状态的表格，并实现将该表格导出为 Excel 文件的功能。我们将通过 xlsx 和 file-saver 两个库来生成和下载 Excel 文件。

1.安装依赖

首先，需要安装导出 Excel 文件所需的依赖库 xlsx 和 file-saver，并确保 Element UI 已正确集成到项目中。

首先安装需要的库：element-ui、xlsx 和 file-saver：

npm install element-ui xlsx file-saver

在 main.js 中引入 Element UI：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

2. 创建基础表格

在这个部分，我们使用 Element UI 的 el-table 组件来展示表格数据。我们在表格中加入了几个常见的字段：选择框、序号、姓名、年龄、城市和状态。同时，在最后一列中加入了操作按钮，可以点击查看每行的数据。

<template>
  <div>
    <el-button type="primary" @click="exportTable">导出表格</el-button>
    <el-table ref="table" :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="city" label="城市" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template v-slot="{row}">
          {{ statusMap[row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="{row}">
          <el-button size="mini" type="text" @click="onClickView(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusMap: { // 状态映射
        '0': '安排中',
        '1': '整改中',
        '2': '已完成'
      },
      tableData: [
        { name: 'John', age: 25, city: 'New York', status: 0 },
        { name: 'Jane', age: 30, city: 'Paris', status: 2 },
        { name: 'Tom', age: 22, city: 'London', status: 1 }
      ]
    };
  },
  methods: {
    onClickView(row) {
      console.log('查看数据:', row);
    },
  }
};
</script>

3. 实现导出功能

现在，我们来实现表格导出功能。首先，确保导出的表头和表格展示的一致，我们使用 this.$refs.table.columns 动态获取表头信息，并利用 xlsx 库生成 Excel 文件。

完整代码：

<template>
  <div>
    <el-button type="primary" @click="exportTable">导出表格</el-button>
    <el-table ref="table" :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="city" label="城市" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template v-slot="{row}">
          {{ statusMap[row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="{row}">
          <el-button size="mini" type="text" @click="onClickView(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      statusMap: { 
        '0': '安排中',
        '1': '整改中',
        '2': '已完成'
      },
      tableData: [
        { name: 'John', age: 25, city: 'New York', status: 0 },
        { name: 'Jane', age: 30, city: 'Paris', status: 2 },
        { name: 'Tom', age: 22, city: 'London', status: 1 }
      ]
    };
  },
  methods: {
    onClickView(row) {
      console.log('查看数据:', row);
    },
    exportTable() {
      // 动态获取表头，过滤掉 selection 和 操作列
      const columns = this.$refs.table.columns
        .filter(col => col.type !== 'selection' && col.label !== '操作')
        .map(col => ({
          prop: col.property,
          label: col.label
        }));

      // 生成导出数据，映射状态
      const exportData = this.tableData.map((row, index) => {
        return columns.reduce((acc, col) => {
          if (col.label === '序号') {
            acc['序号'] = index + 1; // 序号
          } else if (col.prop === 'status') {
            acc[col.label] = this.statusMap[row[col.prop]] || row[col.prop]; // 状态映射
          } else {
            acc[col.label] = row[col.prop];
          }
          return acc;
        }, {});
      });

      // 将数据转换为 Excel 工作表
      const ws = XLSX.utils.json_to_sheet(exportData, { header: columns.map(col => col.label) });

      // 创建工作簿
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '表格数据');

      // 生成并下载 Excel 文件
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const fileName = `table_data_${new Date().toLocaleDateString()}.xlsx`;
      saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName);
    }
  }
};
</script>

4. 代码详解

• 动态获取表头：通过 this.$refs.table.columns 动态获取表头信息，并过滤掉选择框和操作列。
• 生成导出数据：遍历表格数据，为每行生成一个包含表头属性的对象。针对状态列进行状态映射，确保导出文件中的状态为对应的文本而非数值。
• XLSX 文件生成：使用 XLSX.utils.json_to_sheet 方法将表格数据转换为 Excel 工作表，并使用 XLSX.write 方法生成二进制数据。
• 文件下载：通过 file-saver 库的 saveAs 方法，触发浏览器下载生成的 Excel 文件

4. 实现效果

5. 总结

通过以上代码，你可以在 Vue 项目中轻松实现表格导出为 Excel 文件的功能。你可以根据自己的业务需求，扩展表格数据或自定义表头样式，以适应项目的不同场景。