【js】讀取Excel文件(xlsx格式),並用表格(table)展示數據

1、效果

在這裏插入圖片描述

2、下載xlsx.mini.js

GitHub上有一個讀取Excel文件的項目
https://github.com/SheetJS/sheetjs
因爲我只是想要讀取xlsx文件,故只下載了項目裏的一個xlsx.mini.js文件

3、主要代碼

<script type="text/javascript" src="js/xlsx.mini.js" ></script>
<script>
		var excelFile;
		// 讀取文件的內容
		function showfile(obj) {
			if(!obj.files) {
				return;
			}
			var f = obj.files[0];
			var reader = new FileReader();
			reader.readAsBinaryString(f);
			reader.onload = function(e) {
				var data = e.target.result;
				excelFile = XLSX.read(data, {
					type: 'binary'
				});

				//展示所有表
				// for(var i=0;i<excelFile.SheetNames.length;i++){
				// 	 document.getElementById("excelFile").innerHTML +=excelFile.SheetNames[i]+"="+JSON.stringify(XLSX.utils.sheet_to_json(excelFile.Sheets[excelFile.SheetNames[i]]))+"<br/>";
				//       }

				var dataTable1 = "";
				//只展示第一個表
				var headers = new Array();
				var str = XLSX.utils.sheet_to_json(excelFile.Sheets[excelFile.SheetNames[0]])
				dataTable1+= "<table border='1'><tr>"
				for(var key in str[0]){
					headers.push(key)  //獲取表頭
					dataTable1 += "<th>" + key + "</th>"
				}
				dataTable1 += "</tr>"
				// console.log(headers)
				
				//這裏顯示前五行
				for(var i=0;i<5;i++){
					// var json = JSON.stringify(str[i])
					dataTable1 += "<tr>"
					var json = str[i]
					for( var j=0;j<headers.length;j++){
						dataTable1 += "<td>" + json[headers[j]] + "</td>";
					}
					dataTable1 += "</tr>"<br/>";
				}

				dataTable1 += "</table>"
				document.getElementById("excelFile").innerHTML = dataTable1

			}
		}
	</script>

<div class="up_btn">
<input type="file" id="xFile" name="" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="showfile(this)"></div>

<div id="excelFile"></div>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章