vue3 elementplus 数据导出格式为excel

在Vue 3中使用Element Plus进行数据导出，并指定导出格式为Excel（.xlsx），可以使用第三方库如xlsx来实现。以下是一个简单的示例：

1. 安装xlsx库：npm install xlsx file-saver

2. 在Vue组件中使用xlsx库来处理数据导出：
   <template>
     <el-button @click="exportData">导出数据</el-button>
   </template>
    
   <script setup>
   import { ref } from 'vue';
   import { ElButton } from 'element-plus';
   import { saveAs } from 'file-saver';
   import * as XLSX from 'xlsx';
    
   const exportData = () => {
     // 假设我们有一个表格数据数组
     const tableData = ref([
       { name: 'John Doe', email: 'john@example.com' },
       { name: 'Jane Doe', email: 'jane@example.com' }
     ]);
    
     // 将数据转换为工作表
     const worksheet = XLSX.utils.json_to_sheet(tableData.value);
    
     // 创建工作簿并添加工作表
     const workbook = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    
     // 生成Excel文件并导出
     const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
     const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
     saveAs(dataBlob, 'data.xlsx');
   };
   </script>
    
   <style>
   /* 这里可以添加一些样式 */
   </style>