详细js读取execl内容并展示
生活随笔
收集整理的這篇文章主要介紹了
详细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循環內修改，其他不要動任何地方
更改table存放元素
總結
以上是生活随笔為你收集整理的详细js读取execl内容并展示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 14代酷睿6GHz有戏 Intel 4
- 下一篇： 【转】DICOM中几个判断图像方向的ta