如何將選擇的文件轉爲json數據
1.將 xlsx.full.min.js 導入到頁面中；
2.然後通過 FileReader 對象讀取文件利用 js-xlsx 轉成 json 數據
將得到的json數據渲染到頁面上
1.由於選擇的Excel文件屬於表格，渲染時選用 table tr td 等標籤；
2.獲取表頭數據，得到表格列數和列名；
3.通過 for 循環創建 tr 和 td，並給 td 標籤添加上列名；
4.對數據對象進行遍歷，通過數據對象的鍵名和 td 標籤的列名給對應的 td 添加內容；
5.爲了使空白的表格可以編輯，在創建 td 時通過 $.html 的方法添加 input 標籤，在給 td 添加內容時同樣使用 $.html 進行，把不需要 input 標籤的 td 的 html內容重寫。
代碼示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="xlsx.full.min.js" >
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
table{
border-collapse: collapse;
border: black 1px solid;
}
th{
text-align: center;
padding: 20px 0;
}
td{
padding: 5px 10px;
border: black 1px solid;
}
input{
border: none; }
/* 瀏覽器自帶的 input 標籤樣式並不好看 將 input 標籤的邊框去掉 */
</style>
</head>
<body>
<input type="file" onchange="importf(this)" />
<table id="demo">
</table>
<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) {
// console.log(e.target.result);
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 colspan=${keyAry.length}>${keyAry[0]}</th></tr></thead>`).appendTo($("#demo"));
for(var d of data){
// 通過循環,每有一條數據添加一行表格
var tr = $("<tr></tr>");
for(var n = 0;n< keyAry.length;n++){
// 根據keyAry數組的長度,創建每一行表格中的td
$("<td></td>").html("<input>").addClass(keyAry[n]).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;
}
</script>
</body>
</html>