基于PHP制作通用的Excel导入程序

吾爱主题阅读：127 2022-11-08 15:13:00 评论：0

昨天和两个做开发的朋友聊天，对于我还在使用LayUI感到奇怪，我也没有多解释，毕竟LayUI对于做一些中小型的开发还是不错的，前端的框架中，熟悉了一个其他的也差之不多。但LayUI的资料不细致是个很大的缺憾。

用户提出有一个Excel表的记录要导入，这个是基本要求，肯定要满足。

2006年，我用PowerBuilder写过一个通用的导入程序，程序上也不难。

用前端框架来完成会有一点麻烦，主要在于

1、数据回显

如果是让用户选择一个Excel文件然后就直接入库，那程序就太简单了，问题是要先让用户看到结果，可能的话还可以修改，然后再保存到数据库中。

2、数据保存

因为以前C/S开发使用的是强连接，操作数据后直接提交即可；但现在前端和后端是弱连接，一次交互就需要配置相应参数才可能保存数据，动态的表格保存就有一点小麻烦。

作为一般性的要求，这个程序肯定是要应对数据库中的所有表。

那么只能先将数据表的字段设置传到PHP中，然后PHP提取Excel记录，按照LayUI对表记录的要求封装数据，传回到前端。

具体做法：

1、在数据库中创建表，记录要导入的表信息；

2、在前端列出表，让用户选择要导入的表；

3、根据选择的表，确定字段参数即对应的Excel列；

4、将前端选择传入到PHP中，提取Excel记录，传回前端；

5、用户确定要保存数据，点击保存，数据入库。

一天完成，功能全部正常，后面需要加入一些错误检测，还有文件名应该使用用户名加随机数来存储，这样可以防止多用户冲突，读取完删除。

这个程序主要涉及的就是动态对象、动态属性的创建与赋值。

完成的界面：

程序前端代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >〖通用Excel数据表导入〗</ title > < meta name = "renderer" content = "webkit" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > < meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" > < link rel = "stylesheet" href = "../lib/layui-v2.6.3/css/layui.css" rel = "external nofollow" media = "all" > < link rel = "stylesheet" href = "../css/public.css" rel = "external nofollow" media = "all" > < script src = "../lib/layui-v2.6.3/layui.js" charset = "utf-8" ></ script > < style > body { background-color: #ffffff; } </ style > </ head > < body > < div class = "layui-form layuimini-form" > < form class = "layui-form login-bottom" lay-fiter = "ZTBUserEdit" > < div class = "layui-tab" > < ul class = "layui-tab-title" > < li class = "layui-this" >导入设置</ li > < li >导入的数据表记录</ li > </ ul > < div class = "layui-tab-content" > < div class = "layui-tab-item layui-show" > < div style = "width: 1000px;" > < div class = "layuimini-container" > < div class = "layuimini-main" > < div class = "layui-form layuimini-form" style = "white-space:nowrap!important;" > < div class = "layui-form-item" > < label class = "layui-form-label" >选择要导入的表</ label > < div class = "layui-input-block" > < select id = "tableList" lay-filter = "tableListFilter" > < option value = "" ></ option > </ select > </ div > </ div > < div class = "layui-form-item" > < label class = "layui-form-label" >Excel文件</ label > < div class = "layui-input-inline" style = "width: 400px;" > < input type = "text" name = "Dc05" id = "Dc05" value = "" style = "width: 400px;" class = "layui-input" disabled = "disabled" > </ div > < div class = "layui-input-inline" > < button type = "button" class = "layui-btn layui-btn-sm layui-btn-normal" style = "width: 100px;height: 39px;" id = "selectExcel" >选择Excel文件</ button > < input type = 'file' id = 'readFile' style = "opacity: 0;border: 0px solid #1e9fff;" > </ div > </ div > < div class = "layui-form-item" style = "padding-left: 41px;" > < div class = "layui-input-inline" > < label class = "layui-form-label" >工作簿序号</ label > < input type = "number" id = "excelSetSheet" value = "1" class = "layui-input" style = "width: 50px;" > </ div > < div class = "layui-input-inline" > < label class = "layui-form-label" >起始行号</ label > < input type = "number" id = "excelSetStartRow" value = "4" class = "layui-input" style = "width: 50px;" > </ div > < div class = "layui-input-inline" > < label class = "layui-form-label" >结束行号</ label > < input type = "number" id = "excelSetEndRow" value = "33" class = "layui-input" style = "width: 50px;" > </ div > < button class = "layui-btn layui-btn-normal" lay-submit lay-filter = "getData" style = "width: 100px;height: 39px;" >提取数据</ button > </ div > </ div > < table class = "layui-hide" id = "currentTableIdSet" lay-filter = "currentTableFilterSet" ></ table > </ div > </ div > </ div > </ div > < div class = "layui-tab-item" > < button class = "layui-btn layui-btn-normal" lay-submit lay-filter = "saveBtn" >保存数据</ button > < table class = "layui-hide" id = "currentTableIdTwo" lay-filter = "currentTableFilterTwo" ></ table > </ div > </ div > </ div > </ form > </ div > < script > let tableNameList; let selectTableName; let tableTotalCount; let submitData=[];//准备一个空数组 let fieldSet=[];//字段设置 let dbRows={};//Excel记录的行对象 let colSet=[]; let colSetChild=[]; let dbDataRecordCount; layui.use(['layer','form','table'], function () { var form = layui.form; var layer = layui.layer; var $ = layui.$; var table = layui.table; document.getElementById('selectExcel').addEventListener('click',function(){ $("#readFile").trigger("click"); }); document.getElementById('readFile').addEventListener('change',function(){ if(this.files.length===0){ layer.msg('没有选择文件！',{time:3000,icon:5}); return; } if(this.files[0].name.split('.')[1]!='xls'){ layer.msg('请选择Excel文件！',{time:3000,icon:5}); return; } let reader=new FileReader(); reader.onload=function (){ console.log(reader.result); } document.getElementById('Dc05').value=this.files[0].name; }) //得到数据表的名称列表 $.ajax({ url:'ZTBexcelDataIn.php', data:{"OP":"getTableList"}, type:'POST', async:false, success:function (data) { tableNameList = data['data']; //在数组中找到对应的编码 for(var i=0;i< tableNameList.length ;i++){ $('#tableList').append(new Option(tableNameList[i].c02, tableNameList[i].c02)); } },error:function(data){ console.log(data); } }); form.render(); form.on('submit(getData)', function (data) { data = data.field; let tempData = new Object();//准备一个空对象 tempData.excelSheet = document .getElementById("excelSetSheet").value; tempData.excelSetStartRow = document .getElementById("excelSetStartRow").value; tempData.excelSetEndRow = document .getElementById("excelSetEndRow").value; let addData = new Object(); addData.excelSet = tempData ; submitData.push(addData); for(let i = 0 ;i<=tableTotalCount-1;i++){ tempData = new Object(); tempData.C02=$("#currentTableIdSet").next().find("tbody tr[ data-index = '" +i +"' ] td[ data-field = 'c02' ] div").html();//字段英文名 tempData.C03=$("#currentTableIdSet").next().find("tbody tr[ data-index = '" +i +"' ] td[ data-field = 'c03' ] div").html();//字段汉字名称 tempData.C09=$("#currentTableIdSet").next().find("tbody tr[ data-index = '" +i +"' ] td[ data-field = 'c09' ] div").html();//字段对应的Excel列 fieldSet.push(tempData); dbRows[tempData.C02]=''; colSetChild={}; colSetChild['field']=tempData.C02; colSetChild['title']=tempData.C03; colSetChild['width']=100; colSet.push(colSetChild); } submitData.push(fieldSet); //准备提取数据 let excelFile = document .getElementById('readFile'); //用FormData对象对表单数据进行封装 const fd = new FormData();//FormData构造器接收的是一个form的DOM对象 fd.append("excelFile",excelFile.files[0]);//excel文件数据 fd.append("excelSet",JSON.stringify(submitData));//设置 fd.append("dbRows",JSON.stringify(dbRows));//行对象 fd.append("OP",'getSet'); $.ajax({ url: 'ZTBexcelDataIn.php', type: "POST", data: fd, dataType: "JSON", async: true, processData: false,//设置为false,JQuery则不对数据进行序列化 contentType: false,//设置为false，JQuery则不设Content-Type请求头 beforeSend: function(xhr){}, complete: function(xhr,status){}, error: function(xhr,status,error){}, success: function(result){ //刷新数据记录表 table.render({ elem: '#currentTableIdTwo', data:result['data'], cols: [colSet], done: function (res, curr, count) { dbDataRecordCount = res .data.length; } }); } }); return false; }) //监听下拉列表的点击事件 form.on('select(tableListFilter)', function(data){ let selectItemName = data .value; //选择的单位名称 //选择的具体表 selectTableName = tableNameList .find(element=>element.c02==selectItemName ).c01; //提取具体的设置信息 table.render({ elem: '#currentTableIdSet', url: 'ZTBexcelDataIn.php', method:'POST', where:{ "OP":"getSetList", "selectTable":selectTableName}, cols: [[ {field: 'c01', width: 80, title: '表的名字', hide: true}, {field: 'c02', width: 120, title: '字段英文名称'}, {field: 'c03', width: 150, title: '字段汉字名称'}, {field: 'c09', width: 120, title: '对应的Excel列号',edit: 'number'}, {field: 'c04', width: 100, title: '数据类型'}, {field: 'c05', width: 100, title: '长度'}, {field: 'c06', width: 120, title: '能否为空'} ]], done: function (res, curr, count) { tableTotalCount=res.data.length; } }); }); form.on('submit(saveBtn)', function (data) { for(let K=0;K< dbDataRecordCount ;K++){ let insertSql = '' ; let assignSql = '' ; for(let i = 0 ;i<tableTotalCount;i++){ let tempFieldName = '' ; let tempFiedData; let tempFieldType = '' ; tempFieldName=$("#currentTableIdSet").next().find("tbody tr[ data-index = '" +i +"' ] td[ data-field = 'c02' ] div").html(); tempFieldType=$("#currentTableIdSet").next().find("tbody tr[ data-index = '" +i +"' ] td[ data-field = 'c04' ] div").html(); if(insertSql==''){ insertSql = tempFieldName ; }else{ insertSql =insertSql +"," +tempFieldName; } tempFiedData=$("#currentTableIdTwo").next().find("tbody tr[ data-index = '" + K +"' ] td[ data-field = '"+tempFieldName+"' ] div").html() if(tempFiedData=='undefined' || tempFiedData==null){ if(tempFieldType=='INTEGER' || tempFieldType=='DECIMAL'){ tempFiedData = 0 ; }else{ tempFiedData = '' ; } } if(assignSql==''){ if(tempFieldType=='INTEGER' || tempFieldType=='DECIMAL'){ assignSql = tempFiedData ; }else{ assignSql = "'" +tempFiedData+"'"; } }else{ if(tempFieldType=='INTEGER' || tempFieldType=='DECIMAL'){ assignSql =assignSql+","+tempFiedData; }else{ assignSql =assignSql+",'"+tempFiedData+"'"; } } } //提交数据 $.ajax({ url:'ZTBexcelDataIn.php', data:{ "OP":"saveData", "insertSql":insertSql, "assignSql":assignSql, "tableName":selectTableName }, type:'POST', async:false, success:function (data) { },error:function(data){} }); } return false; }); }); </script> </ body > </ html >