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 导出，可以继续优化！😃