vue3 导出excel表格

在 Vue 3 中，你可以使用一些库来导出 Excel 表格，例如 `xlsx` 或 `exceljs`。下面是使用 `xlsx` 库的示例代码：

1. 首先，安装 `xlsx` 库：

npm install xlsx

2. 在你的 Vue 3 项目中，创建一个导出 Excel 表格的方法：

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

<script>
import XLSX from 'xlsx';

export default {
  methods: {
    exportExcel() {
      // 创建一个Workbook对象
      const workbook = XLSX.utils.book_new();

      // 创建一个Worksheet对象
      const worksheet = XLSX.utils.json_to_sheet([
        { Name: 'John', Age: 25, City: 'New York' },
        { Name: 'Mike', Age: 30, City: 'Paris' },
        { Name: 'Sarah', Age: 28, City: 'London' }
      ]);

      // 将Worksheet添加到Workbook中
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 将Workbook对象转换为二进制数据流
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 创建Blob对象
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

      // 创建下载链接并点击下载
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'my_excel_file.xlsx';
      a.click();

      // 释放URL对象
      window.URL.revokeObjectURL(url);
    }
  }
};
</script>

在这个示例代码中，我们使用 `xlsx` 库来创建一个 Excel 文件，并将数据写入到文件中。然后，我们将生成的 Excel 文件通过 Blob 对象创建下载链接，并模拟点击下载链接进行下载。

你可以将这段代码放入你的 Vue 3 组件中，并在需要导出 Excel 表格的地方调用 `exportExcel` 方法。

希望对你有所帮助！如果有任何问题，请随时问我。