用vue2编写表格导出

以下是一个简单的例子，使用Vue2和xlsx库来实现表格导出：

1. 安装xlsx库

npm install xlsx --save

2. 在Vue组件中引入xlsx库

import XLSX from 'xlsx';

3. 创建一个表格数据

data() {
  return {
    tableData: [
      { name: 'Alice', age: 20, gender: 'female' },
      { name: 'Bob', age: 25, gender: 'male' },
      { name: 'Charlie', age: 30, gender: 'male' }
    ]
  }
}

4. 创建一个导出表格的方法

methods: {
  exportExcel() {
    const sheet = XLSX.utils.json_to_sheet(this.tableData); // 将数据转换为Sheet对象
    const workbook = XLSX.utils.book_new(); // 创建工作簿
    XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1'); // 将Sheet添加到工作簿
    XLSX.writeFile(workbook, 'table.xlsx'); // 下载Excel文件
  }
}

5. 在模板中添加一个按钮来触发导出方法

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportExcel">Export</button>
  </div>
</template>

完整代码如下：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportExcel">Export</button>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  name: 'TableExport',
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 20, gender: 'female' },
        { name: 'Bob', age: 25, gender: 'male' },
        { name: 'Charlie', age: 30, gender: 'male' }
      ]
    }
  },
  methods: {
    exportExcel() {
      const sheet = XLSX.utils.json_to_sheet(this.tableData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');
      XLSX.writeFile(workbook, 'table.xlsx');
    }
  }
}
</script>