Vue 3 将表格数据导出为 Excel 文件

1.首先，你需要安装 xlsx 库，它可以帮助你将表格数据转换成 Excel 格式。

在你的 Vue 3 项目中运行以下命令来安装 xlsx：

npm install xlsx

2.使用 xlsx 导出 Excel

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    
    <!-- 导出按钮 -->
    <el-button type="primary" @click="exportExcel">导出 Excel</el-button>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'; // 导入 xlsx 库

export default {
  data() {
    return {
      // 表格数据
      tableData: [
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Jane', age: 25, address: 'London' },
        { name: 'Mike', age: 32, address: 'San Francisco' }
      ]
    };
  },
  methods: {
    exportExcel() {
      // 将数据转换成工作表
      const ws = XLSX.utils.json_to_sheet(this.tableData);
      
      // 创建一个新的工作簿
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      
      // 导出为 Excel 文件
      XLSX.writeFile(wb, '表格数据.xlsx');
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需求进行调整 */
</style>