vue实现excel导入导出

Vue可以利用第三方库来实现Excel的导入和导出，下面是一个简单的示例：

首先，安装`xlsx`和`file-saver`这两个库：

npm install xlsx file-saver --save

然后在Vue组件中，定义一个方法来实现Excel导出：

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

export default {
  methods: {
    exportExcel() {
      // 构建Excel数据
      const data = [
        ['姓名', '年龄', '性别'],
        ['张三', 18, '男'],
        ['李四', 20, '女'],
        ['王五', 22, '男'],
      ];

      // 创建一个Workbook对象
      const workbook = XLSX.utils.book_new();

      // 创建一个Worksheet对象
      const sheet = XLSX.utils.aoa_to_sheet(data);

      // 添加Worksheet到Workbook
      XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');

      // 生成Excel文件
      const excelFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 保存Excel文件
      const fileName = 'data.xlsx';
      const blob = new Blob([excelFile], { type: 'application/octet-stream' });
      FileSaver.saveAs(blob, fileName);
    },
  },
};

以上代码中，我们使用`XLSX`库创建一个Workbook对象，并添加一个Worksheet对象。然后使用`FileSaver`库保存Excel文件。

接下来，我们来实现Excel的导入功能。在Vue组件中，定义一个方法来实现Excel导入：

import XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    importExcel(event) {
      // 获取上传的文件
      const file = event.target.files[0];

      // 创建一个FileReader对象
      const reader = new FileReader();

      // 读取Excel文件
      reader.onload = (e) => {
        // 获取Excel文件数据
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 获取第一个Worksheet
        const sheet = workbook.Sheets[workbook.SheetNames[0]];

        // 将Worksheet转换为JSON数据
        const json = XLSX.utils.sheet_to_json(sheet, { header: 1 });

        // 将JSON数据转换为表格数据
        const tableData = [];
        for (let i = 1; i < json.length; i++) {
          const row = {};
          for (let j = 0; j < json[0].length; j++) {
            row[json[0][j]] = json[i][j];
          }
          tableData.push(row);
        }
        this.tableData = tableData;
      };

      // 读取文件数据
      reader.readAsArrayBuffer(file);
    },
  },
};

以上代码中，我们使用`XLSX`库读取Excel文件，并将Worksheet转换为JSON数据。然后将JSON数据转换为表格数据，最终存储在Vue组件的`tableData`变量中。