用vue2 写一个能支持excel下载 导入 导出的页面

当然可以！以下是一个示例的Vue2页面，可以支持Excel文件的下载、导入和导出：

<template>
  <div>
    <h1>Excel导入导出示例</h1>
    <button @click="exportExcel">导出Excel</button>
    <input type="file" ref="fileInput" @change="importExcel" accept=".xlsx,.xls" />
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(person, index) in people" :key="index">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
          <td>{{ person.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      people: [] // 存储导入的数据
    };
  },
  methods: {
    exportExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.people);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      XLSX.writeFile(workbook, 'people.xlsx');
    },
    importExcel(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        const columns = jsonData.shift();
        this.people = jsonData.map((row) => {
          const person = {};
          columns.forEach((column, index) => {
            person[column] = row[index];
          });
          return person;
        });
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

这个示例使用了XLSX库来处理Excel文件的导入和导出功能。在页面上，点击"导出Excel"按钮会将`people`数组中的数据导出为Excel文件。通过选择Excel文件后，点击"导入"按钮会将文件中的数据导入到`people`数组中，并在页面上展示。请确保已经安装并引入了XLSX库来使用这个示例。

希望能对你有所帮助！如有更多问题，请随时提问。