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

先导入pom文件

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

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

前端：

		<el-button icon="primary" @click="exportData()" size="small">导出文件</el-button>

			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

    <el-dialog title="导入数据" :visible.sync="upload.open" width="400px" append-to-body>
        <el-upload
			ref="upload"
			:accept="fileType.join(',')"
			:limit="1"
			:headers="upload.headers"
			:action="upload.url"
			:disabled="upload.isUploading"
			:before-upload="beforeUpload"
			:on-progress="handleFileProgress"
			:on-success="handleFileSuccess"
			:auto-upload="false"
			:on-error="handleFileError"
			drag
			>
			<i class="el-icon-upload" />
			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			<div slot="tip" class="el-upload__tip" style="color: red">
				提示：仅允许导入“xls”或“xlsx”格式文件！
			</div>
			</el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>


	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("文件数据有误!");
			},

效果