详细js读取execl内容并展示

作者execl内容展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--     <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=UWZknCsaNBZ3VASidMNsRzluRIVxXdCI"></script> --><script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script><script src="index.js"></script><title>批量地址解析</title><style>body,html{width: 100%;height: 100%;padding: 0;margin: 0;}#container{width: 100%;height: 20%;overflow: hidden;}#result{width: 100%;z-index: 99;}table{width:90%;border-collapse:collapse;text-align:center;}td,th{border:1px solid #ccc}</style>
</head>
<body><div id='result'><div><input type="file" id="excel-file"></div><div id="readingdata">运行当中。。。。。。</div></div><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><script>$("#readingdata").hide()var province =  document.getElementById("input")//获取输入框元素//execl读取$('#excel-file').change(function(e) {$("#readingdata").show()//存放读取内容var execlcontent = [];var files = e.target.files;//查看路径是否正确console.log("文件路径");console.log(files);//文件读取对象var fileReader = new FileReader();fileReader.onload = function(ev) {try {var data = ev.target.resultworkbook = XLSX.read(data, {type: 'binary'// 以二进制流方式读取得到整份excel表格对象})} catch (e) {console.log('文件类型不正确');return;}// 表格的表格范围，可用于判断表头是否数量是否正确var fromTo = '';// 遍历每张表读取for (var sheet in workbook.Sheets) {if (workbook.Sheets.hasOwnProperty(sheet)) {fromTo = workbook.Sheets[sheet]['!ref'];console.log(fromTo);execlcontent = execlcontent.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));break; // 如果读取多张表，就取消注释这行}}console.log(execlcontent);show(execlcontent);//以下是对读取后的数据进行处理的,更改表头内容//存放新的内容// newexeclcontent = []// for(i=0;i<execlcontent.length;i++){//     biaotou1 = execlcontent[i].表头1//     biaotou2 = execlcontent[i].表头2//     //console.log(typeof biaotou1);//     ob={"表头4":biaotou1,"表头3":biaotou2}//     newexeclcontent.push(ob)// }// console.log(newexeclcontent);// show(newexeclcontent);};// 以二进制方式打开文件fileReader.readAsBinaryString(files[0]);});//读取内容展示function show(excontent){$("#readingdata").text("读取完成！！！！！");json=excontent//创建tablevar table=document.createElement("table");//创建thead，并追加到table中var thead=document.createElement("thead");table.appendChild(thead);//创建tr,并追加到theadvar tr=document.createElement("tr");thead.appendChild(tr);//json数组中第1个人的每个属性for(var key in json[0]){//创建thvar th=document.createElement("th");//设置th的内容为keyth.innerHTML=key;//将th追加到tr中tr.appendChild(th);}//创建tbody元素var tbody=document.createElement("tbody");//将tbody追加到table中table.appendChild(tbody);//遍历json中所有员工for(var i=0;i<json.length;i++){//创建trvar tr=document.createElement("tr");//遍历当前员工的每个属性for(var key in json[i]){//创建tdvar td=document.createElement("td");//设置td的内容为当前员工的当前属性值td.innerHTML=json[i][key];//将td追加到trtr.appendChild(td);}//(遍历结束)//将tr追加到tbody中tbody.appendChild(tr);}//将table添加到id为data的div下document.getElementById("readingdata").appendChild(table);}</script>
</body>
</html>

对execl文件修改只需要在for循环内修改，其他不要动任何地方