前端使用vue导出Excel表格

您可以使用以下步骤在Vue中导出Excel表格：

1. 首先，您需要安装 `file-saver` 和 `xlsx` 库。您可以使用以下命令进行安装：

npm install file-saver xlsx --save

2. 在Vue组件中，您需要导入 `file-saver` 和 `xlsx` 库。您可以使用以下代码进行导入：

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

3. 创建一个函数，该函数将生成Excel文件并将其保存到本地计算机。以下是实现的示例代码：

methods: {
  exportExcel() {
    /* 创建数据 */
    const data = [
      ['姓名', '年龄', '性别'],
      ['张三', 18, '男'],
      ['李四', 22, '男'],
      ['小红', 16, '女']
    ];

    /* 创建一个工作簿 */
    const workbook = XLSX.utils.book_new();

    /* 创建一个工作表 */
    const worksheet = XLSX.utils.aoa_to_sheet(data);

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

    /* 将工作簿转换为二进制文件 */
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

    /* 保存文件 */
    const fileName = 'example.xlsx';
    const file = new Blob([excelBuffer], { type: 'application/octet-stream' });
    saveAs(file, fileName);
  }
}

4. 最后，在Vue组件模板中添加一个按钮，当用户单击该按钮时，将调用 `exportExcel` 函数。以下是示例代码：

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

这样，当用户单击该按钮时，将生成并保存Excel文件。