Springboo集成easyexcel实现导入，导出功能 前端vue

先导入pom文件

	/// 当前为最新版本 
     <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>3.1.0</version>
        </dependency>

详情信息请前往官方地址 easyexcel ；

前端：

		导出文件

			exportMetaBook(){
				window.location.href =（导出后端地址）   
			},  

导出：

后端：

控制层      ## 内置EasyExcel工具类无需 无需再次引入
    @GetMapping("/exportData")
    public void exportData(HttpServletResponse response) throws IOException {
        String fileName = URLEncoder.encode("测试列表", "UTF-8");
        List<MetaBook> list = resourceMetaBookService.selectResourceMetaBookList(null);
        response.setContentType("application/vnd.ms-excel");
        response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
        EasyExcel.write(response.getOutputStream(), MetaBook.class).sheet("模板").doWrite(list);
    }

实体：

    /** 元数据唯一标识符 */
    @ExcelProperty(index = 0, value ="唯一标识符")
    @ColumnWidth(35)
    private String id;

    /** 著录号 */
    @ExcelProperty(index = 1, value ="姓名")
    @ColumnWidth(35)
    private String name;

    /** 题名 */
    @ExcelProperty(index = 2, value ="年龄") ///映射 导出列明
    @ColumnWidth(35)    //设置当前表格长度  
    private String age;	

测试即可

导入

控制层

  @PostMapping("/importMetaBoot")
    public void importMetaBoot(MultipartFile file) throws IOException {
		
		// EasyExcel详情    file.getInputStream()  ResoucesMetaAndExtend.class 导入映射类
        EasyExcel.read(file.getInputStream(), MetaBook.class, new PageReadListener<MetaBook>(dataList -> {
        	// 遍历当前读取
            for (MetaBook demoData : dataList) {
                String string = JSON.toJSONString(demoData);
                Map mapTypes = JSON.parseObject(string);
                try {
                	// 导入service 层 这里的mapTypes已经拿到了excel的数据
                    resourceMetaBookService.importMetaBook(mapTypes);  
                    
                } catch (ParseException e) {
                    e.printStackTrace();
                }
            }
        })).sheet().doRead();

    }

service层拿到mapTypes的数据就可以直接去添加或者修改了 具体代码比较简单

前端： 试用element ui 具体参数介绍可详情elm ui

    
        
			
			
将文件拖到此处，或点击上传
			

				提示：仅允许导入“xls”或“xlsx”格式文件！
			
			
      

        确 定
        取 消
      
    


	data() {
			return {
				fileType: ['.xlsx', '.xls'],
				upload: {
					// // 是否显示弹出层（用户导入）
					open: false,
					// // 弹出层标题（用户导入）
					title: "",
					// // 是否禁用上传
					isUploading: false,
					// // 设置上传的请求头部
					headers: { Authorization: getToken },
					// // 上传地址
					url: this.baseUrl+"/你的后端地址",
					// // 是否更新已经存在的用户数据
					isUploading: false
				}

			};
		},


	 // 文件上传中处理
			handleFileProgress() {
				this.upload.isUploading = true
			},
			// 文件上传成功处理
			handleFileSuccess() {
				this.upload.isUploading = false
				this.$refs.upload.clearFiles()
				this.upload.open=false  // 关闭弹窗
				//刷新当前列表
			},
			// 提交上传文件
			submitUpload() {
				this.$refs.upload.submit()
			},
			// 上传文件之前的钩子
			beforeUpload(file) {
				const isXlS =
					file.type ===
					"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
					file.type === "application/vnd.ms-excel";
				if (!isXlS) {
					this.$message.error("仅支持xls、xlsx格式的文件!");
				}
				this.filename = file.name;
				return isXlS;
			},
			handleFileError(){
				this.$message.error("文件数据有误!");
			},

效果