使用js實現excel檔案的上傳及渲染到前端頁面為table
阿新 • • 發佈：2021-09-17
使用js實現excel檔案的上傳及渲染到前端頁面為table:
匯入表格：
執行結果：
程式碼展示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title<!DOCTYPEhtml> <html>>Document</title> <script type="text/javascript" src="./lib/jquery.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js"></script> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } </style> </head> <body> <!-- 1.檔案選擇框 --> <input type="file" id="file01"> <!-- 2.上傳檔案按鈕 --> <button id="btnUpload">上傳檔案</button> <div class="progress" style="width: 500px;margin: 15px 10px;"> <!--bootstrap進度條--> <!-- <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">0%</div> --> <table id="demo01"></table> </div> <img src="./img/loading.gif" style="display: none;" alt="" id="loading"> <!-- 3.img標籤，來選擇上傳檔案後的圖片 --> <img src="" alt="" id="img" width="800"> <script> $('#btnUpload').on('click', function () { var files = $('#file01')[0].files[0];//檔案物件 // console.log(files); var file_name = files['name'];//檔名稱 var index = file_name.lastIndexOf("."); if (index != -1) { file_format = file_name.substr(index + 1).toUpperCase();//檔案格式字尾 if (file_format != 'XLS' && file_format != 'XLSX') { alert("只能上傳.xls和.xlsx型別的檔案!"); } else { //讀取檔案內容 var reader = new FileReader(); reader.readAsBinaryString(files); reader.onload = function (e) { var data = e.target.result; var wb = XLSX.read(data, { type: 'binary' // 以二進位制流方式讀取獲得整份excel表格物件 }); var sheet_names = wb.SheetNames;//獲取excel中所有表名稱 // console.log(sheet_name); var sheet1_name = sheet_names[0];//獲取excel中第一張表名稱 var sheet01_obj = XLSX.utils.sheet_to_json(wb.Sheets[sheet1_name]);//獲取excel中第一張表資料，陣列型別，每一行資料都是一個物件 // console.log(sheet01_obj); // console.log(sheet01_obj.length); var table1 = ""; var table2 = ""; var keyArr = []; table1 += "<tr>"; for (var key01 in sheet01_obj[0]) { keyArr.push(key01); table1 += '<th nowrap>' + key01 + '</th>';//表頭 // console.log(table1); }; table2 += "</tr>"; // console.log(table1); for (var i = 0; i < sheet01_obj.length; i++) { table2 += "<tr>"; for (var j in sheet01_obj[i]) { // console.log('value:'+j); table2 += '<td nowrap>' + sheet01_obj[i][j] + '</td>';//表資料 }; table2 += "</tr>"; } console.log(table1 + table2); document.getElementById("demo01").innerHTML = table1 + table2; } } } }); </script> </body> </html>
<head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <metahttp-equiv="X-UA-Compatible"content="ie=edge"/> <title>Document</title> <scripttype="text/javascript"src="./lib/jquery.js"></script> <scripttype="text/javascript"src="https://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js"></script> <style> table, th, td{ border:1pxsolidblack; border-collapse:collapse; }
th, td{ padding:5px; } </style> </head>
<body> <!--1.檔案選擇框--> <inputtype="file"id="file01"> <!--2.上傳檔案按鈕--> <buttonid="btnUpload">上傳檔案</button> <!--bootstrap進度條--> <divclass="progress"style="width:500px;margin:15px10px;"> <divclass="progress-barprogress-bar-stripedactive"style="width:0%"id="percent"> 0%
</div> <tableid="demo01">
</table> </div>
<imgsrc="./img/loading.gif"style="display:none;"alt=""id="loading"> <!--3.img標籤，來選擇上傳檔案後的圖片--> <imgsrc=""alt=""id="img"width="800">
<script> $('#btnUpload').on('click',function(){ varfiles=$('#file01')[0].files[0];//檔案物件 //console.log(files); varfile_name=files['name'];//檔名稱 varindex=file_name.lastIndexOf("."); if(index!=-1){ file_format=file_name.substr(index+1).toUpperCase();//檔案格式字尾 if(file_format!='XLS'&&file_format!='XLSX'){ alert("只能上傳.xls和.xlsx型別的檔案!"); }else{ //讀取檔案內容 varreader=newFileReader(); reader.readAsBinaryString(files); reader.onload=function(e){ vardata=e.target.result; varwb=XLSX.read(data,{ type:'binary'//以二進位制流方式讀取獲得整份excel表格物件 }); varsheet_names=wb.SheetNames;//獲取excel中所有表名稱 //console.log(sheet_name); varsheet1_name=sheet_names[0];//獲取excel中第一張表名稱 varsheet01_obj=XLSX.utils.sheet_to_json(wb.Sheets[sheet1_name]);//獲取excel中第一張表資料，陣列型別，每一行資料都是一個物件 //console.log(sheet01_obj); //console.log(sheet01_obj.length); vartable1=""; vartable2=""; vartable3="";
varkeyArr=[]; table1+="<tr>"; for(varkey01insheet01_obj[0]){ keyArr.push(key01); table1+='<thnowrap>'+key01+'</th>';//表頭 //vartable="<tr><th>Artist</th><th>Title</th></tr>"; //console.log(table1);
}; table2+="</tr>"; //console.log(table1);
for(vari=0;i<sheet01_obj.length;i++){ table2+="<tr>"; for(varjinsheet01_obj[i]){ //console.log('value:'+j); table2+='<tdnowrap>'+sheet01_obj[i][j]+'</td>';//表資料
}; table2+="</tr>";
} console.log(table1+table2); document.getElementById("demo01").innerHTML=table1+table2;
}
}
}
});
</script> </body>
</html>