一、项目需求：
前端需要用户导入完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在审核中，审核通过直接把地址附上：