vue3点击按钮导出excel

要在 Vue3 中实现点击按钮导出 Excel 文件，可以使用 js-xlsx 库和 file-saver 库。以下是一个示例代码：

1. 安装依赖

npm install --save xlsx file-saver

2. 在组件中引入依赖

import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

3. 在按钮点击事件中编写导出 Excel 的逻辑

exportExcel() {
  // 构造数据
  const data = [
    ['姓名', '年龄', '性别'],
    ['张三', 18, '男'],
    ['李四', 20, '女'],
    ['王五', 22, '男'],
  ]
  // 创建 Workbook 对象
  const workbook = XLSX.utils.book_new()
  // 创建 Worksheet 对象
  const worksheet = XLSX.utils.aoa_to_sheet(data)
  // 将 Worksheet 添加到 Workbook 中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  // 将 Workbook 转换成二进制数据流
  const binaryData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  // 将二进制数据流保存为文件
  saveAs(new Blob([binaryData], { type: 'application/octet-stream' }), 'data.xlsx')
}

4. 在模板中添加按钮并绑定点击事件

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