1.首先用的js-xlsx插件，網上下載相關插件
2.下載JQ插件
3.顯示展示如下圖
JS和HTML代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="file" onchange="importf(this)" /> <table id="demo"> </body> </html> <script lang="javascript" src="dist/xlsx.full.min.js"></script> <script src="dist/jquery-3.1.1.min.js"></script> <script> /* 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; //是否將文件讀取為二進制字符串 function importf(obj) {//導入 if(!obj.files) { return; } var f = obj.files[0]; var reader = new FileReader(); reader.onload = function(e) { if(rABS) { wb = XLSX.read(btoa(fixdata(e.target.result)), {//手動轉化 type: 'base64' }); } else { wb = XLSX.read(e.target.result, { type: 'binary' }); } //wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字 //wb.Sheets[Sheet名]獲取第一個Sheet的數據 var data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); console.log(data); var keyAry = []; // 遍歷json對象，獲取每一列的鍵名 for(var key in data[1]){ keyAry.push(key); } // 清除上次渲染的表格 $("#demo").empty(); // 設置表格頭 $(`<thead><tr><th>${keyAry[0]}</th><th>${keyAry[1]}</th><th>${keyAry[2]}</th><th>${keyAry[3]}</th></tr></thead>`).appendTo($("#demo")); for(var d of data){ // 通過循環,每有一條數據添加一行表格 var tr = $("<tr onclick='liClick(this)'></tr>"); for(var n = 0;n< keyAry.length;n++){ var className1="" // 根據keyAry數組的長度,創建每一行表格中的td if(keyAry[n]=="編號"){ className1="order" }else if(keyAry[n]=="姓名"){ className1="name" }else if(keyAry[n]=="手機號"){ className1="iphone" }else if(keyAry[n]=="Id"){ className1="id" }; $("<td></td>").html("<input>").addClass(className1).appendTo(tr); } // 遍歷對象,根據鍵名找到是哪一列的數據,給對應的td添加內容 for(k in d){ // (tr[0].children[keyAry.indexOf(k)]) $(tr[0].children[keyAry.indexOf(k)]).html(d[k]); } tr.appendTo($("#demo")); } } if(rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } } function fixdata(data) { //文件流轉BinaryStrings var o = "", l = 0, w = 10240; jsArry=[]; for(; l < data.byteLength / w; ++l) jsArry.push(String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))); return jsArry; } function liClick(obj,event){ var div=$(obj.innerHTML); var iphone=div.filter(".iphone").text(); console.log(iphone) } </script>