百度怎么搜索到自己的网站,中国建筑集团网站,wordpress模板适合做什么站,腾讯云服务器cvm文章目录 一、easyExcel简介二、Excel表的导出2.1 添加 Maven 依赖2.2 创建导出数据的实体类4. 编写导出接口5. 前端代码6. 实现效果 三、excel表的导出1. Excel表导入的整体流程1.1 配置文件存储路径 2. 前端实现2.1 文件上传组件 2.2 文件上传逻辑3. 后端实现3.1 文件上传接口… 文章目录 一、easyExcel简介二、Excel表的导出2.1 添加 Maven 依赖2.2 创建导出数据的实体类4. 编写导出接口5. 前端代码6. 实现效果 三、excel表的导出1. Excel表导入的整体流程1.1 配置文件存储路径 2. 前端实现2.1 文件上传组件 2.2 文件上传逻辑3. 后端实现3.1 文件上传接口 3.2 数据解析接口4. 实现效果 一、easyExcel简介
Excel表的导入导出有很多种方式这里我们使用easyExel。EasyExcel 是阿里巴巴推出的一个处理 Excel 文件的库特别适合大数据量的 Excel 文件操作具有性能优越、内存占用小等特点。
二、Excel表的导出
集成 EasyExcel 到 Spring Boot 项目
2.1 添加 Maven 依赖
首先在 pom.xml 中添加 EasyExcel 的依赖
dependencygroupIdcom.alibaba/groupIdartifactIdeasyexcel/artifactIdversion3.0.6/version !-- 版本号可以根据需要调整 --
/dependency
2.2 创建导出数据的实体类
根据需要创建实体类使用ExcelProperty注解标注实体类的字段指定表头名称和列索引EasyExcel 会根据这个类的字段和注解来生成 Excel 文件。
Data
public class PersonVO {ExcelProperty(value 人员ID, index 0)private Integer personId;ExcelIgnoreprivate Integer communityId;ExcelProperty(value 单元名称, index 2)private String termName;ExcelProperty(value 房号, index 3)private String houseNo;ExcelProperty(value 姓名, index 4)private String userName;ExcelProperty(value 性别, index 5)private String sex;ExcelProperty(value 手机号, index 6)private String mobile;ExcelIgnoreprivate String faceUrl;ExcelProperty(value 居住性质, index 7)private String personType;ExcelIgnoreprivate Integer state;ExcelIgnoreprivate String creater;ExcelIgnoreprivate Date createTime;ExcelProperty(value 备注, index 8)private String remark;ExcelProperty(value 社区名称, index 1)private String communityName;
} 不需要导出的列使用ExcelIgnore忽略 4. 编写导出接口
RestController
public class ExcelController {GetMapping(/exportExcel)public Result exportExcel(PersonListForm personListForm){//查询数据PageVO pageVO this.personService.personList(personListForm);ListPersonVO list pageVO.getList();// 设置文件路径和文件名String path D:/community/excel_export/;String fileName path personInfo_ System.currentTimeMillis() .xlsx;// 使用 EasyExcel 导出数据EasyExcel.write(fileName, PersonVO.class).sheet(人员信息).doWrite(list); // 直接写入数据return Result.ok().put(data, fileName);}
}5. 前端代码
//导出按钮el-form-itemel-button typeprimary iconel-icon-download clickhandleExcel导出/el-button/el-form-itemhandleExcel() {this.$confirm(是否确认导出所有数据项?).then(() {exportExcel(this.listQuery).then(res {const fileUrl process.env.VUE_APP_BASE_API /sys/person/exportExcel?fileName res.data;const link document.createElement(a);link.href fileUrl;link.download res.data; // 下载文件的名称link.click();});}).catch(() {});}6. 实现效果 三、excel表的导出
1. Excel表导入的整体流程
前端部分
用户通过上传组件选择Excel文件。文件上传到后端服务器。后端返回文件路径或标识符。前端调用解析接口将文件路径传递给后端。后端解析Excel文件将数据保存到数据库。返回解析结果给前端提示用户成功或失败信息。
后端部分
提供文件上传接口接收Excel文件并保存到服务器。提供解析接口读取Excel文件内容并处理数据。将解析的数据保存到数据库。返回解析结果。
1.1 配置文件存储路径
确保文件存储路径是动态配置的避免硬编码。可以在application.yml中配置文件存储路径
upload:excel: D:/community/upload/excel/在代码中读取配置
Value(${upload.excel})private String excel;2. 前端实现
2.1 文件上传组件
使用Element UI的el-upload组件实现文件上传功能。
templateel-dialog:title上传住户资料:close-on-click-modalfalse:visible.syncvisiblewidth60%el-form label-width100px stylewidth:95%; keyup.enter.nativedataFormSubmit()el-rowel-col :span24el-form-item label导入住户资料el-uploadclassavatar-uploader:headersheaders:actionuploadUrl:show-file-listfalse:on-successhandleAvatarSuccessnameuploadExcel:before-uploadbeforeAvatarUploadi classel-icon-plus avatar-uploader-icon/i/el-upload/el-form-item/el-colel-col :span24el-form-item label模板下载a :hrefprocess.env.VUE_APP_BASE_API /community/upload/excel/personInfo.xls download点击下载Excel模板/a/el-form-item/el-colel-col :span24span stylecolor:red v-htmlerrorInfo //el-col/el-row/el-formspan slotfooter classdialog-footerel-button typeprimary clickdataFormSubmit()确 定/el-button/span/el-dialog
/template2.2 文件上传逻辑
在beforeAvatarUpload方法中限制文件类型和大小
beforeAvatarUpload(file) {this.errorInfo ;const ext file.name.substring(file.name.lastIndexOf(.) 1).toLowerCase();const imgSize file.size / 1024 / 1024 10;if (![xls, xlsx].includes(ext)) {this.$message.error(文件格式只能为xls或xlsx文件);return false;}if (!imgSize) {this.$message.error(文件大小不能超过10MB);return false;}return true;
}在handleAvatarSuccess方法中处理上传成功后的逻辑
handleAvatarSuccess(response, file) {if (response response.code 200) {parsefile(response.data).then(res {if (res res.code 200) {if (res.status success) {this.errorInfo res.data;this.$message.success(上传成功);} else {this.errorInfo res.data;this.$message.error(上传失败);}} else {this.errorInfo 解析文件失败;this.$message.error(解析文件失败);}}).catch(error {console.error(解析文件失败, error);this.errorInfo 解析文件失败;this.$message.error(解析文件失败);});} else {this.errorInfo 文件上传失败;this.$message.error(文件上传失败);}
}3. 后端实现
3.1 文件上传接口
接收上传的Excel文件并保存到服务器的临时目录中
PostMapping(/excelUpload)
public Result excelUpload(RequestParam(uploadExcel) MultipartFile file) throws Exception {if (file.getOriginalFilename().equals()) {return Result.error(没有选中要上传的文件);} else {String picName UUID.randomUUID().toString();String oriName file.getOriginalFilename();String extName oriName.substring(oriName.lastIndexOf(.));String newFileName picName extName;File targetFile new File(excel, newFileName);// 保存文件file.transferTo(targetFile);return Result.ok().put(data, newFileName);}
}3.2 数据解析接口
读取Excel文件内容解析数据并保存到数据库
LogAnnotation(导入数据)
PostMapping(/parsefile/{fileName})
public Result parsefile(PathVariable(fileName) String fileName, HttpSession session) {User user (User) session.getAttribute(user);try {String basePath excel fileName;ListExcelVo dataList EasyExcel.read(new File(basePath), ExcelVo.class).sheet().doReadSync();for (ExcelVo vo : dataList) {Person single new Person();single.setPersonId(0);single.setState(1);single.setFaceUrl();single.setCommunityId(vo.getCommunityId());single.setTermName(vo.getTermName());single.setHouseNo(vo.getHouseNo());single.setUserName(vo.getUserName());single.setSex(vo.getSex());single.setMobile(vo.getMobile());single.setPersonType(vo.getPersonType());single.setRemark(vo.getRemark());single.setCreater(user.getUsername());this.personService.save(single);}return Result.ok().put(status, success).put(data, 数据导入完成);} catch (Exception e) {e.printStackTrace();return Result.error().put(status, fail).put(data, 解析文件失败 e.getMessage());}
}4. 实现效果
