前言
JSON是碼農(nóng)們常用的數(shù)據(jù)格式,輕且方便,而直接手敲JSON卻是比較麻煩和令人心情崩潰的(因?yàn)橹貜?fù)的東西很多),所以很多碼農(nóng)可能會(huì)和我一樣,選擇用Excel去輸入數(shù)據(jù),然后再想辦法轉(zhuǎn)換成JSON格式。今天教大家使用JS 將 Excel 轉(zhuǎn)為 JSON的方法。
1.新建HTML文件
<html lang="en"> <title> Convert Excel File To JSON </title><head> <script> </script></head><body></body>
我們可以使用<input>標(biāo)簽接收上傳文件。代碼如下:
<input type="file" id="fileUploader" name="fileUploader" accept=".xls, .xlsx"/>
2.監(jiān)聽input change 事件
<script> $(document).ready(function(){ $("#fileUploader").change(function(evt){ // 上傳文件處理邏輯... }); });</script>3.讀取上傳文件
在這里,我們假設(shè)用戶只上傳一個(gè)文件。
var selectedFile = evt.target.files[0];
接下來,我們將使用FileReader讀取該文件數(shù)據(jù)。從這個(gè)FileReader,我們可以讀取excel文件中的數(shù)據(jù)作為二進(jìn)制字符串。然后我們使用XLSX,它是SheetJS js-xlsx的內(nèi)置工具,將我們的二進(jìn)制字符串轉(zhuǎn)換為JSON對(duì)象。引入 XLSX
<script lang =“javascript”src =“dist/xlsx.full.min.js”> </ script>
您可以下載源碼xlsx.full.min.js
完整代碼
<html lang="en"> <title> Convert Excel File To JSON </title><head> <script src="js/jquery.js"> </script> <script lang="javascript" src="js/xlsx.full.min.js"></script> <script> $(document).ready(function(){ $("#fileUploader").change(function(evt){ var selectedFile = evt.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { var data = event.target.result; var workbook = XLSX.read(data, { type: 'binary' }); workbook.SheetNames.forEach(function(sheetName) { var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]); if (XL_row_object.length > 0) { document.getElementById("jsonObject").innerHTML = JSON.stringify(XL_row_object); } }) }; reader.onerror = function(event) { console.error("File could not be read! Code " + event.target.error.code); }; // 讀取上傳文件為二進(jìn)制 reader.readAsBinaryString(selectedFile); }); }); </script></head><body> <input type="file" id="fileUploader" name="fileUploader" accept=".xls, .xlsx"/> </br></br> JSON : <label id="jsonObject"> </label></body>作為示例,我們使用如下的excel表格。
新聞熱點(diǎn)
疑難解答
圖片精選