vue 导出表格

在 Vue 中导出表格可以使用第三方库，比如 `xlsx` 和 `file-saver`。具体步骤如下：

1. 安装依赖：

npm install xlsx file-saver --save

2. 在组件中引入依赖：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

3. 添加导出方法：

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

  // 创建工作簿
  const wb = XLSX.utils.book_new();
  // 创建工作表
  const ws = XLSX.utils.aoa_to_sheet(data);
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  // 导出 Excel 文件
  XLSX.writeFile(wb, 'table.xlsx');
}

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

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

这样就可以在点击按钮时导出表格了。需要注意的是，`XLSX.utils.aoa_to_sheet` 方法用于将数组转换为工作表，如果需要导出表格中的图片、样式等复杂内容，可以使用 `XLSX.utils.table_to_sheet` 方法。