SpringBoot Excel导入导出
2019-06-13 09:31
1271 查看
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层
相关文章推荐
- Spring Boot学习笔记----POI(Excel导入导出)
- SpringBoot中使用POI,快速实现Excel导入导出
- SpringBoot+Mybatis+MySQL+Vue+ElementUI,用POI导出和导入Excel文件案例
- Excel导入导出(ant design+spring boot)
- SpringBoot中使用POI,快速实现Excel导入导出
- SpringMVC/SpringBoot使用easypoi实现Excel文件导入导出功能实现
- Springboot+Poi实现Excel的导入导出
- springboot搭配easypoi轻松应对excel导入导出
- SpringBoot中使用POI,快速实现Excel导入导出
- springmvc/springboot导出excel
- Springboot上传excel并将表格数据导入或更新mySql数据库
- Spring Boot实战之导出excel,并上传存入Azure Storage
- Spring3MVC 导入导出excel
- SpringBoot+AngularJS导出数据库数据到excel
- Spring (八) 使用jxl导入导出excel实例及其在spring mvc中的应用
- Spring Boot 菜鸟教程 12 EasyPoi导出Excel下载
- Spring Boot+AngularJS导出excel
- SpringBoot+Vue之表格的CRUD与导入导出
- springboot poi 导出excel
- SpringBoot中POI 导入 导出