vue中将el-table导出为excel文件

在 Vue + Element UI 中，el-table 数据导出 Excel 文件，可以使用 xlsx（SheetJS）库进行处理。以下是详细的实现方法，包括安装依赖、代码示例和优化建议。

1. 安装依赖

首先，安装 xlsx 库：

复制编辑
npm install xlsx file-saver --save复制

• xlsx：用于解析和生成 Excel 文件。
• file-saver：用于保存导出的 Excel 文件。

2. 代码实现

完整示例

vue
复制编辑
<template>
  <div>
    <el-button type="primary" @click="exportExcel">导出 Excel</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80"></el-table-column>
      <el-table-column prop="city" label="城市" width="150"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
 
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "张三", age: 25, city: "北京" },
        { id: 2, name: "李四", age: 30, city: "上海" },
        { id: 3, name: "王五", age: 28, city: "广州" },
      ],
    };
  },
  methods: {
    exportExcel() {
      // 1. 提取表格数据
      const data = this.tableData.map((row) => ({
        ID: row.id,
        姓名: row.name,
        年龄: row.age,
        城市: row.city,
      }));
 
      // 2. 创建工作表
      const worksheet = XLSX.utils.json_to_sheet(data);
 
      // 3. 创建工作簿
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "表格数据");
 
      // 4. 生成 Excel 并下载
      const excelBuffer = XLSX.write(workbook, {
        bookType: "xlsx",
        type: "array",
      });
 
      const blob = new Blob([excelBuffer], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
 
      saveAs(blob, "表格数据.xlsx");
    },
  },
};
</script>复制

3. 代码解析

exportExcel 方法

1. 格式化数据

   • 先将 el-table 的 tableData 数据格式化成适合 Excel 的 JSON 结构。
   • json_to_sheet 方法用于将 JSON 转换为 Excel 可识别的表格。

2. 创建工作表 & 工作簿

   • XLSX.utils.json_to_sheet(data) 创建 Excel 工作表。
   • XLSX.utils.book_new() 创建新的 Excel 文件（工作簿）。
   • XLSX.utils.book_append_sheet(workbook, worksheet, "表格数据") 将表格数据添加到工作簿。

3. 生成 Excel 并触发下载

   • XLSX.write(workbook, { bookType: "xlsx", type: "array" }) 生成 Excel 文件的二进制数据。
   • new Blob([...], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }) 生成 Excel 文件 Blob。
   • saveAs(blob, "表格数据.xlsx") 触发浏览器下载。

4. 额外优化

✅ 1. 自定义表头

可以用 el-table-column 的 label 作为 Excel 表头，而不是手动写：

js
复制编辑
exportExcel() {
  const headers = this.$refs.table.columns.map(col => col.label); // 获取表头
  const keys = this.$refs.table.columns.map(col => col.property); // 获取字段
 
  const data = this.tableData.map(row => {
    let obj = {};
    keys.forEach((key, index) => {
      obj[headers[index]] = row[key];
    });
    return obj;
  });
 
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "数据");
 
  const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
  const blob = new Blob([excelBuffer], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  });
 
  saveAs(blob, "表格数据.xlsx");
}复制

然后在 el-table 中添加 ref="table"。

✅ 2. 处理合并单元格

可以使用 XLSX.utils.sheet_add_aoa 进行合并：

js
复制编辑
XLSX.utils.sheet_add_aoa(worksheet, [["ID", "姓名", "年龄", "城市"]], { origin: "A1" });复制

这样可以在 A1 手动插入表头。

✅ 3. 设置列宽

js
复制编辑
worksheet["!cols"] = [
  { wch: 10 }, // ID列宽
  { wch: 20 }, // 姓名列宽
  { wch: 10 }, // 年龄列宽
  { wch: 15 }, // 城市列宽
];复制

5. 结论

✅ 适用于 Vue 2.0 + Element UI 的 el-table
✅ 可以导出 Excel，支持中文表头
✅ 支持自定义表头、列宽、格式优化
✅ 减少人工操作，提高开发效率

如果你需要更复杂的 Excel 处理，比如 合并单元格、设置样式、多个 Sheet 导出，可以继续优化！😃