SpringBoot+layui实现Excel导入操作

2024-06-01 07:52

本文主要是介绍SpringBoot+layui实现Excel导入操作,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

excel导入步骤

    • 第三方插件
      • 引入插件
    • 效果图 (方法1)
    • 代码实现(方法1)
      • Html代码( 公共)
        • 下载导入模板
      • js实现 (方法1)
        • 上传文件实现
      • 效果图(方法2)
      • 代码实现(方法2)这里主要改的是js部分
      • 后端代码(公共部分)
        • controller
        • Service
        • serviceImpl
        • mapper
        • mapper.xml

第三方插件

layui_Excel

引入插件

 layui.use(['form', 'table', 'notify', 'dtree', 'dropdown', 'excel', 'element', 'laytpl'], function () {var $ = layui.jquery,form = layui.form,table = layui.table;var notify = layui.notify;var util = layui.util;var laydate = layui.laydate;var excel = layui.excel;var laytpl = layui.laytpl;var element = layui.element;})

效果图 (方法1)

在这里插入图片描述

代码实现(方法1)

Html代码( 公共)

在这里插入图片描述

  <button class="layui-btn data-light-btn layui-btn-sm " lay-event="data-export-btn"><iclass="fa fa-download"></i> 导入</button>

在这里插入图片描述


<div id="file" style="display: none;padding:20px;"><div class="layui-form-item"><div class="layui-form-block"><input type="file" class="layui-btn data-white-btn" id="LAY-excel-import-excel"multiple="multiple"><!--提示--><p><div class="layui-form-mid layui-text-em"><span style="color: #FF5722;">*</span>仅允许导入“xls”或“xlsx”格式文件!<!--下载导入模板--><button class="layui-btn layui-btn-xs data-gray-btn" lay-on="LAY-excel-import-download"><i class="fa fa-file-excel-o"></i>下载模板</button></div></p></div></div>
</div>
下载导入模板

在这里插入图片描述

  util.on("lay-on", {"LAY-excel-import-download": function () {//导入Excel//下载导入模板window.location.href = "../dist/erpInfo/用户数据导入模板.xlsx";//设置下载名称var fileName = "用户数据导入模板.xlsx";}})

js实现 (方法1)

上传文件实现

在这里插入图片描述

 table.on('toolbar(userInfoTableFilter)', function (obj) {var id = obj.config.id;var checkStatus = table.checkStatus(id);var dataArr = checkStatus.data;//用于删除var data = checkStatus.data[0]; //获取选中行数据var othis = lay(this);switch (obj.event) {case 'data-export-btn':layer.open({type: 1,title: '导入数据',shadeClose: true,content: $('#file'),skin: 'class-layer-sea',btn: ['<i class="fa fa-check"></i> 导入', '<i class="fa fa-times"></i> 取消'],yes: function (index) {//判断当前是否有文件if (document.getElementById('LAY-excel-import-excel').files.length === 0) {notify.info('请选择需要导入的文件文件', "vcenter", "shadow", false, 1000);return false;}//判断文件格式是否xls”或“xlsxif (document.getElementById('LAY-excel-import-excel').files[0].name.split('.')[1] !== 'xls' && document.getElementById('LAY-excel-import-excel').files[0].name.split('.')[1] !== 'xlsx') {notify.warning('仅允许导入“xls”或“xlsx”格式文件!', "vcenter", "shadow", false, 1000);return false;}//获取当前文件var files = document.getElementById('LAY-excel-import-excel').files;//读取文件excel.importExcel(files, {// 可以在读取数据同时梳理数据}, function (data, book) {// 也可以全部读取出来再进行数据梳理data = excel.filterImportData(data, {'nickname': 'A', 'account': 'B', 'email': 'C', 'deptId': 'D', 'postId': 'E', 'gender': 'F', 'status': 'G'})let getdata;//选择的表数据$.each(data[0], function (index, value) {if (getdata == undefined) {getdata = data[0][index];//从第二行开始获取数据}})//tab选择,采集上传数据element.on('tab(test)', function (d) {getdata = data[0][this.getAttribute('lay-id')];//第一个表格数据});// 打印测试数据:console.log(JSON.stringify(getdata.slice(1)))// 判断是否为空数据if (JSON.stringify(getdata.slice(1))==='[]'){notify.warning('不能导入空数据!', "vcenter", "shadow", false, 1000);return false;}notify.loading('正在导入数据,请稍后...', "vcenter", "shadow", false)setTimeout(function () {notify.destroyAll();//关闭加载框$.ajax({url: '/user/importUserInfo',type: 'post',data: {name: JSON.stringify(getdata.slice(1))},success: function (res) {if (res.code === 0) {notify.success(res.msg, "vcenter", "shadow", false, 1000);}else if (res.code === 1) {notify.warning(res.msg, "vcenter", "shadow", false, 1000);}else {notify.error(res.msg, "vcenter", "shadow", false, 1000);}}}).done(function () {setTimeout(function () {notify.destroyAll();layer.closeAll();parent.location.reload();//重载页面}, 500);});},2000)})},btn2: function () {$('#file').find('input').val('');layer.closeAll();window.location.reload();return false;}});break;};});

效果图(方法2)

在这里插入图片描述

代码实现(方法2)这里主要改的是js部分

 table.on('toolbar(userInfoTableFilter)', function (obj) {var id = obj.config.id;var checkStatus = table.checkStatus(id);var dataArr = checkStatus.data;//用于删除var data = checkStatus.data[0]; //获取选中行数据var othis = lay(this);switch (obj.event) {case 'data-export-btn':layer.open({type: 1,title: '导入数据',shadeClose: true,content: $('#file'),skin: 'class-layer-sea',btn: ['<i class="fa fa-times"></i> 取消'],success: function () {$(function () {// 监听上传文件的事件$('#LAY-excel-import-excel').change(function (e) {// 注意:这里直接引用 e.target.files 会导致 FileList 对象在读取之前变化,导致无法弹出文件var files = Object.values(e.target.files)uploadExcel(files)// 变更完清空,否则选择同一个文件不触发此事件e.target.value = ''})// 文件拖拽document.body.ondragover = function (e) {e.preventDefault()}document.body.ondrop = function (e) {e.preventDefault()var files = e.dataTransfer.filesuploadExcel(files)}})},btn2: function () {$('#file').find('input').val('');layer.closeAll();window.location.reload();return false;}});break;};});/*** 上传excel的处理函数,传入文件对象数组* @param  {FileList} files [description]* @return {[type]}       [description]* 方法2:*/function uploadExcel(files) {try {excel.importExcel(files, {// 可以在读取数据同时梳理数据}, function (data, book) {// 也可以全部读取出来再进行数据梳理data = excel.filterImportData(data, {'nickname': 'A', 'account': 'B', 'email': 'C', 'deptId': 'D', 'postId': 'E', 'gender': 'F', 'status': 'G'})let getdata;$.each(data[0], function (index, value) {if (getdata == undefined) {getdata = data[0][index];//从第二行开始获取数据}})//tab选择,采集上传数据element.on('tab(test)', function (d) {getdata = data[0][this.getAttribute('lay-id')];//第一个表格数据});// 如果不需要展示直接上传,可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可layer.open({title: '文件转换结果检阅',closeBtn: false,skin: 'class-layer-yellow',area: ['630px', '300px'],tipsMore: true,content: laytpl($('#LAY-excel-export-ans').html()).render({data: data, files: files}),success: function () {element.render('tab');layui.code({});// 处理合并for (var file_index in book) {if (!book.hasOwnProperty(file_index)) {continue;}// 遍历每个Sheetfor (var sheet_name in book[file_index].Sheets) {if (!book[file_index].Sheets.hasOwnProperty(sheet_name)) {continue;}var sheetObj = book[file_index].Sheets[sheet_name];// 仅在有合并参数时进行操作if (!sheetObj['!merges']) {continue;}// 遍历每个Sheet中每个 !mergesfor (var merge_index = 0; merge_index < sheetObj['!merges'].length; merge_index++) {var mergeObj = sheetObj['!merges'][merge_index];// 每个合并参数的 s.c 表示左上角单元格的列,s.r 表示左上角单元格的行,e.c 表示右下角单元格的列,e.r 表示右下角单元格的行,计算时注意 + 1$('#table-export-' + file_index + '-' + sheet_name + '-' + mergeObj.s.r + '-' + mergeObj.s.c).prop('rowspan', mergeObj.e.r - mergeObj.s.r + 1).prop('colspan', mergeObj.e.c - mergeObj.s.c + 1);for (var r = mergeObj.s.r; r <= mergeObj.e.r; r++) {for (var c = mergeObj.s.c; c <= mergeObj.e.c; c++) {// 排除左上角if (r === mergeObj.s.r && c === mergeObj.s.c) {continue;}$('#table-export-' + file_index + '-' + sheet_name + '-' + r + '-' + c).remove();}}}}}},btn: ['立即导入', '放弃导入'],yes: function (index, layero) {if (JSON.stringify(getdata.slice(1))==='[]'){notify.warning('不能导入空数据!', "vcenter", "shadow", false, 1000);return false;}notify.loading('正在导入数据,请稍后...', "vcenter", "shadow", false)setTimeout(function () {notify.destroyAll();//关闭加载框$.ajax({url: '/user/importUserInfo',type: 'post',data: {name: JSON.stringify(getdata.slice(1))},success: function (res) {if (res.code === 0) {notify.success(res.msg, "vcenter", "shadow", false, 1000);}else if (res.code === 1) {notify.warning(res.msg, "vcenter", "shadow", false, 1000);}else {notify.error(res.msg, "vcenter", "shadow", false, 1000);}}}).done(function () {setTimeout(function () {notify.destroyAll();layer.closeAll();parent.location.reload();//重载页面}, 500);});},2000)return false;},btn2: function (index, layero) {// 点击取消按钮的回调函数layer.msg("取消上传成功!");layer.close(index); // 关闭弹窗}});})} catch (e) {layer.alert(e.message)}}

后端代码(公共部分)

controller

这里处理JSON的依赖

 <!--阿里巴巴fastjson依赖--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.83_noneautotype</version></dependency>
/** 数据导入操作* @importUserInfo* */@PostMapping("/importUserInfo")public  Map<String, Object> importUserInfo(@RequestParam("name") String data) {// 创建一个HashMap对象,用于存储返回的结果Map<String, Object> resultMap = new HashMap<>();System.out.println("导入用户信息");try {// 解析前端传递的JSON数据List<UserEntity> userEntities = JSON.parseArray(data, UserEntity.class);// 判断导入的文件中手机号是否在数据库中存在for (UserEntity user : userEntities) {// 判断导入的文件中手机号是否在数据库中存在UserEntity existingUser = userInfoService.selectByAccount(user.getAccount());if (existingUser != null) {resultMap.put("code", 1);resultMap.put("msg", "该"+ user.getAccount()+"账户已存在!");return resultMap;}// 设置创建时间user.setCreateTime(new Date());// 设置默认头像user.setAvatar(user.getGender() == 1 ? "images/avatar/69292338265a201591b9412c9feb6c192788f21a.jpeg" : "images/avatar/89219682b88c376bddc145ca9a9f6d66fddbbd28.jpeg");//设置密码为手机号后六位user.setPassword(MD5Util.encrypt(user.getAccount().substring(5)));//System.out.println(user.getAccount().substring(5));// 设置角色IDuser.setRoleId(3);}// 调用Service层方法将数据插入数据库userInfoService.insertUserInfoExcel(userEntities);resultMap.put("code", 0);resultMap.put("msg", "数据导入成功!");} catch (Exception e) {resultMap.put("msg", "文件不合法,导入失败!" + e.getMessage());}return resultMap;}
Service
   /** excel导入* */void insertUserInfoExcel(List<UserEntity> userEntities);
serviceImpl
/** excel导入* */@Overridepublic void insertUserInfoExcel(List<UserEntity> userEntities) {userMapper.insertUserInfoExcel(userEntities);}
mapper
  /** excel导入* @insertUserInfoExcel* */void insertUserInfoExcel(List<UserEntity> userEntities);
mapper.xml
  <!--excel导入--><insert id="insertUserInfoExcel" parameterType="java.util.List">insert into sys_user (nickname,account,email,dept_id,post_id,gender,status,password,roleId,avatar,createTime)values<foreach item="item" collection="list" separator=",">(#{item.nickname},#{item.account},#{item.email},#{item.deptId},#{item.postId},#{item.gender},#{item.status},#{item.password},#{item.roleId},#{item.avatar},#{item.createTime})</foreach></insert>

这篇关于SpringBoot+layui实现Excel导入操作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1020420

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

python: 多模块(.py)中全局变量的导入

文章目录 global关键字可变类型和不可变类型数据的内存地址单模块(单个py文件)的全局变量示例总结 多模块(多个py文件)的全局变量from x import x导入全局变量示例 import x导入全局变量示例 总结 global关键字 global 的作用范围是模块(.py)级别: 当你在一个模块(文件)中使用 global 声明变量时,这个变量只在该模块的全局命名空

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu