Vue+elementui 纯前端实现Excel导入导出功能（区分表头标题）

在Vue项目中使用element-ui实现Excel的导入和导出功能，可以借助xlsx库来处理Excel文件。以下是实现该功能的基本步骤和示例代码：

1. 安装xlsx库：

npm install xlsx

2. 在Vue组件中引入xlsx和element-ui：

import XLSX from 'xlsx';
import { MessageBox, Message } from 'element-ui';

3. 添加导入和导出的方法：

methods: {
  // 导入Excel
  importExcel(event) {
    const files = event.target.files;
    if (files.length <= 0) {
      return;
    }
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      // 这里的jsonData就是Excel文件的内容，可以根据需要进行处理
      console.log(jsonData);
    };
    fileReader.readAsArrayBuffer(files[0]);
  },
 
  // 导出Excel
  exportExcel() {
    const data = [
      // 这里是要导出的数据，可以根据需要进行定义
      ['表头1', '表头2', '表头3'],
      ['数据1', '数据2', '数据3'],
      // ...
    ];
    const worksheet = XLSX.utils.aoa_to_sheet(data);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
    const date = new Date();
    const fileName = `导出_${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}.xlsx`;
    FileSaver.saveAs(dataBlob, fileName);
  }
}

4. 在模板中添加上传和下载的按钮：

<template>
  <div>
    <input type="file" @change="importExcel" />
    <el-button @click="exportExcel">导出Excel</el-button>
  </div>
</template>

确保在<script>标签中引入了FileSaver库，用于保存生成的Excel文件：

import FileSaver from 'file-saver';

以上代码实现了Excel的导入和导出功能，导入时将Excel文件读取为JSON数据，导出时将JSON数据转换为Excel文件供用户下载。注意，代码中的importExcel方法需要处理更多的边界情况，例如文件类型校验、错误