vue3 将数据导出为excel

Vue3本身并没有提供导出Excel的功能，但可以通过第三方库实现。

以下是一个使用js-xlsx库的示例：

1. 安装js-xlsx

npm install xlsx

2. 在组件中引入js-xlsx

import XLSX from 'xlsx';

3. 编写导出Excel的方法

exportExcel() {
  // 构造表格数据，格式为二维数组
  const data = [
    ['姓名', '年龄', '性别'],
    ['张三', 18, '男'],
    ['李四', 20, '女'],
    ['王五', 22, '男']
  ];

  // 创建工作簿对象
  const workbook = XLSX.utils.book_new();

  // 构造工作表对象
  const worksheet = XLSX.utils.aoa_to_sheet(data);

  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, '表格1');

  // 导出Excel文件
  XLSX.writeFile(workbook, '表格.xlsx');
}

4. 在模板中添加导出按钮

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

完整代码如下：

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

<script>
import XLSX from 'xlsx';

export default {
  methods: {
    exportExcel() {
      // 构造表格数据，格式为二维数组
      const data = [
        ['姓名', '年龄', '性别'],
        ['张三', 18, '男'],
        ['李四', 20, '女'],
        ['王五', 22, '男']
      ];

      // 创建工作簿对象
      const workbook = XLSX.utils.book_new();

      // 构造工作表对象
      const worksheet = XLSX.utils.aoa_to_sheet(data);

      // 将工作表添加到工作簿中
      XLSX.utils.book_append_sheet(workbook, worksheet, '表格1');

      // 导出Excel文件
      XLSX.writeFile(workbook, '表格.xlsx');
    }
  }
}
</script>