vue导出table表格

要导出 Vue 中的表格，你可以使用第三方库 `xlsx` 和 `file-saver`。以下是一个简单的示例：

1. 首先，安装 `xlsx` 和 `file-saver`：

npm install xlsx file-saver --save

2. 在需要导出表格的组件中引入这两个库：

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

3. 创建一个方法来导出表格。以下示例假定你正在使用 `element-ui` 的 `el-table` 组件：

export default {
  data() {
    return {
      tableData: [] // 表格数据
    };
  },
  methods: {
    exportExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.tableData);
      const workbook = {
        Sheets: { data: worksheet },
        SheetNames: ["data"]
      };
      const excelBuffer = XLSX.write(workbook, {
        bookType: "xlsx",
        type: "array"
      });
      const filename = "table-data.xlsx";
      const blob = new Blob([excelBuffer], { type: "application/octet-stream" });
      FileSaver.saveAs(blob, filename);
    }
  }
};

4. 在模板中添加一个按钮并绑定导出方法：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表格列 -->
    </el-table>
    <el-button type="primary" @click="exportExcel">导出表格</el-button>
  </div>
</template>

这样就可以在 Vue 中导出表格了。注意，在示例中，表格数据是一个数组，如果你的表格数据结构不同，需要相应地修改 `json_to_sheet` 方法。