vue3,js,antd vue实现excel文件导出详细代码

以下是使用Vue3、JavaScript和Ant Design Vue实现Excel文件导出的详细代码：

1. 安装依赖：

npm install --save file-saver xlsx ant-design-vue

2. 导入所需模块：

import { saveAs } from 'file-saver';
import XLSX from 'xlsx';
import { Button } from 'ant-design-vue';

3. 在组件中使用Button组件，并绑定一个导出Excel文件的方法：

<template>
  <div>
    <a-button @click="exportExcel">导出 Excel</a-button>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';
import { Button } from 'ant-design-vue';

export default {
  components: {
    Button
  },
  methods: {
    exportExcel() {
      // 生成Excel文件的数据
      const worksheet = XLSX.utils.json_to_sheet([
        { Name: '张三', Age: 18, Gender: '男' },
        { Name: '李四', Age: 20, Gender: '女' },
        { Name: '王五', Age: 22, Gender: '男' }
      ]);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      // 导出Excel文件
      const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'example.xlsx');
    }
  }
};
</script>

在上面的代码中，我们使用`json_to_sheet`方法将一个JSON数据转换为Excel表格中的工作表，然后使用`book_append_sheet`方法将该工作表添加到一个新的工作簿中。最后，我们使用`write`方法将工作簿写入一个数组，并使用`saveAs`方法将该数组转换为Blob对象并下载。你可以根据自己的需要更改生成Excel文件的数据。