vue前端导出excel表格功能

在 Vue 前端实现导出 Excel 表格功能，一般有如下几个步骤：

1. 安装依赖库

在 Vue 项目中使用 `xlsx` 库，可以通过 npm 进行安装：

npm install xlsx --save

2. 实现导出方法

在 Vue 组件中，实现导出 Excel 表格的方法，例如：

import XLSX from 'xlsx'

export default {
  methods: {
    exportExcel() {
      // 准备数据
      const data = [
        ['姓名', '年龄', '性别'],
        ['张三', 18, '男'],
        ['李四', 20, '女'],
        ['王五', 22, '男']
      ]

      // 创建 workbook 对象
      const sheet = XLSX.utils.aoa_to_sheet(data)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1')

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

在上述代码中，首先使用 `XLSX.utils.aoa_to_sheet` 方法将数据转换为 worksheet 对象，然后使用 `XLSX.utils.book_new` 方法创建 workbook 对象，并将 worksheet 对象添加到 workbook 中，最后使用 `XLSX.writeFile` 方法导出 Excel 表格。

3. 触发导出事件

在 Vue 组件中，将导出方法与按钮等元素进行绑定，例如：

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

点击按钮即可触发导出事件，生成 Excel 表格。