一、項目需求：
前端需要用戶導入完EXCEL表格就直接解析相應字段，點擊保存按鈕以後提交給後臺。我們開發的這個項目中用的框架是layui+jquery的。（excel表格如果數據量很大不建議前端做，還是直接後臺解析。這個是性能問題，如果想研究可以自己繼續深入探討一下）
效果展示：
二、JS的引入：
1.xlsx.utils.js
2.xlsx.full.min.js
三、代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./xlsx.full.min.js"></script>
<script src="./xlsx.utils.js"></script>
</head>
<body>
<input type="file" id="demo" />
<div id="loadInfo"></div>
<script>
var demo = document.getElementById("demo");
//表頭和對應數據庫中維護對象
var theadLists={
"Mix&Match":["ID","DV1 Title","DV1","DV2 Title","DV2"]
}
var tbodyLists={
"Mix&Match":["numIid","goodsSnIName","goodsSnI","goodsSnIiName","goodsSnIi"]
}
// 自定義頭字典
const importHeadMap =[]
theadLists['Mix&Match'].map(function (item,indexs,arr) {
var obj={};
tbodyLists['Mix&Match'].map(function (elem,index,array) {
obj[arr[index]]={title:array[index]};
})
importHeadMap.push(obj);
})
console.log('importHeadMap',importHeadMap)
demo.onchange = function () {
let f = this.files[0];
xlsxUtils.import(f, (w) => {
//轉換頭
let oldlist = xlsxUtils.getSheetByIndex(0);
let newlist = [];
for (let v of oldlist) {
// 過濾空行
if (v.ID==undefined)
continue
// 創建行對象
let row = {};
let importHead = importHeadMap[0];
for (let k in importHead) {
let attr = importHead[k];
if (typeof attr.fn == "function")
row[attr.title] = attr.fn(v[k], v);
else
row[attr.title] = v[k];
}
newlist.push(row);
}
console.log('newlist',newlist)
loadInfo.innerHTML = "讀取完成";
});
};
</script>
</body>
</html>
由於兩個JS在審覈中，審覈通過直接把地址附上：