Vue将el-table导出为excel文件的实现方法

npm install xlsx file-saver --save

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>

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");
}

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

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