SpringBoot Excel导入导出

导出

需要引入的JS
纯前端利用 js-xlsx 实现 Excel 文件导入导出功能

**<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>**

*html部分

js部分

批量导入

前台页面 html不部分

引入js

        <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
		<script src="js/jquery2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/normal.js" type="text/javascript" charset="utf-8"></script>**

js部分

**<script type="text/javascript">
            /*
				FileReader共有4种读取方法：
				1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
				2.readAsBinaryString(file)：将文件读取为二进制字符串
				3.readAsDataURL(file)：将文件读取为Data URL
				4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
             */
            
			var wb;//读取完成的数据
            var rABS = false; 			//是否将文件读取为二进制字符串
			var submitjson = [];		//要集中提交的json数组
            function importf(obj) {//导入
                if(!obj.files) {	//如果内容为空,直接return结束方法
                    return;
                }
                var f = obj.files[0];	//多文件上传时代表获取第一个文件
                var reader = new FileReader();	//创建文件读取对象
                reader.onload = function(e) {
                    
					var data = e.target.result;
					if(rABS) {
                        wb = XLSX.read(btoa(fixdata(data)), {	//手动转化
                            type: 'base64'
                        });
                    } else {
                        wb = XLSX.read(data, {
                            type: 'binary'
                        });
                    }
                    //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
                    //wb.Sheets[Sheet名]获取第一个Sheet的数据
 
					//读取第一个sheet表中的数据并转换为json
					var data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
					
					//-------------------加载表头
					var $tr = $("<tr></tr>");  	//创建tr标签
					$.each(data[0],function(key,value){			//遍历第一组数据
						$tr.append($("<th>"+key+"</th>"))		//把数据中的key拿出组成th,加入到tr中
					})
					$tr.append($("<th class='hideclass'>备注</th>"));				//加入一个备注标签
					$("#tab1").append($tr);						//tr标签加入到table中
					//-------------------加载表头
					
					//--------------------加载内容
					$.each(data,function(i,o){					//有几行数据,就遍历多少次. i,指代数据下标 o指代遍历的每一个元素
						var $tr = $("<tr></tr>");  				//创建一个tr节点
						$td = $("<td class='hideclass'></td>");	//创建一个给备注列的td节点
						var flag = true;						//验证正常标记				
						if(data[0]["name"]==null || data[0]["age"]==null || data[0]["sex"]==null ){
							alert("模板有误！！！");
							return false;
						}
						$.each(data[0],function(key,value){				//从第一行中遍历出所有的key
							var content = (o[key]==null)?"":o[key];		//通过key获取值如果为null,返回""空字符串
							$tr.append($("<td>"+content+"</td>"));		//加载正常数据的单元格
							if($.isEmpty(o[key])){						//如果正常加载进入的数据为空,
								$td.append("<span style='color:red'>{0}不能为空</span> ".formatStr(key));	//给td节点加入span提示
								flag=false;	//不正常
							}	
							if(key=="age" && o[key]!=null && o[key].match(/^[0-9]+$/g) ==null ){	//验证年龄必须是数字
								$td.append("<span style='color:red'>{0}数据有误</span> ".formatStr(key));	//给td节点加入span提示
								flag=false;	//不正常
							}
							
							if(key=="birdate" && o[key]!=null && o[key].match() == null ){	//验证生日正则表达式
								$td.append("<span style='color:red'>{0}生日有误</span> ".formatStr(key));	//给td节点加入span提示
								flag=false;	//不正常
							}
						})
						if(flag){	//如果所有数据检查后都正常,flag还是true
							$td.append("<span style='color:green' class='ok'>对勾</span>");	//加入一个绿色对勾
							submitjson.push(o);	//把要提交的数据,加入到json数组中
						}
						
						$tr.append($td);	//把备注单元格加入到行中
						$("#tab1").append($tr);	//把该行插入的table中
					})
					//--------------------加载内容
					
					/* 整合版
					$.each(data,function(i,o){
						var $tr = $("<tr></tr>");  //创建一个tr节点
						if(i==0){
							$.each(o,function(key,value){
								$tr.append($("<th>"+key+"</th>"))
							})
							$("#tab1").append($tr);
							$tr = $("<tr></tr>");
						}
						$.each(o,function(key,value){
							$tr.append($("<td>"+value+"</td>"))
						})
						$("#tab1").append($tr);
					})	
					*/							
				};
                if(rABS) {
                     reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
            }

            function fixdata(data) { //文件流转BinaryString
                var o = "",
                    l = 0,
                    w = 10240;
                for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
                o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
                return o;
            }
			
			function submittalbe(){
				if(submitjson.length!=0){	//有满足条件的数据
					/*
					console.log(submitjson);
					$.mui.each(submitjson,function (i,o) {
						$.post("url",o).always(function(data){
							//调用单对象上传接口. 效率较差。
						})
					})
					*/
				   
				   // 把满足了验证条件的json数组集中上传,已字符串的格式进行上传.后台再对字符串进行解析
				   // JSON.stringify(submitjson) 把json数组变为字符串
					$("#btn1").attr("disabled","disabled");
					$.post("http://192.168.16.102:8081/addSome", {"str":JSON.stringify(submitjson)}).always(function(data){
						//以字符串的形式传递给后台
						//后台再把json数组的字符串解析为集合对象
						var data = $.dealJSONObj(data);
						if(data.code==0){
							alert("成功");
						}else{
							alert(data.msg);
						}
						$("#btn1").removeAttr("disabled");
				   })
				}else{
					alert("无满足条件的数据，或还没有上传文件！！！！！");
				}
			}


			/**
			 * 导出错误数据
			 */
			
			function imp(){
				//首先隐藏正确数据 带有OK样式的是为成功地数据
				$(".ok").parent().parent().hide();
				//隐藏备注 
				$(".hideclass").remove();
				importXlX();
			}
			function importXlX(){
				//导出
				var elt = document.getElementById('tab1');
				var wb = XLSX.utils.table_to_book(elt, {sheet:"测试表"});
				XLSX.writeFile(wb, '错误数据.xlsx');
			}
        </script>**

后台功能实现

dao层

service层

service 实现层

controller层