在Vue项目中使用element-ui实现Excel的导入和导出功能，可以借助xlsx库来处理Excel文件。以下是实现该功能的基本步骤和示例代码：
- 安装
xlsx库：
npm install xlsx- 在Vue组件中引入
xlsx和element-ui：
import XLSX from 'xlsx';
import { MessageBox, Message } from 'element-ui';- 添加导入和导出的方法：
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);
}
}- 在模板中添加上传和下载的按钮：
<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方法需要处理更多的边界情况，例如文件类型校验、错误