痛點：在錄入數(shù)據(jù)時，靠人工將excel表格的內(nèi)容復制到網(wǎng)頁上弓叛，耗費人力及時間成本址芯，且長時間操作后灾茁，準確率得不到保障。
需求：在網(wǎng)頁將Excel導入后是复，表格字段自動填充到網(wǎng)頁的對應位置删顶。
本文將著重介紹Excel文件導入及將導入數(shù)據(jù)轉(zhuǎn)換為json格式。
直接先上效果圖：
Excel.png
excel處理過的json對象.png
該功能使用原生js即可完成淑廊，趁著熱乎來記錄一下逗余。需要用到xlsx.full.min.js，下載地址：https://www.cdnpkg.com/xlsx/file/xlsx.full.min.js/?id=78603
1季惩、下載完成后录粱，頁面引用；
<script src="js/xlsx.full.min.js"></script>
2画拾、html代碼
<input type="file" onchange="impexcel(this)" />
3啥繁、js核心代碼；
// 導入excel
function impexcel(obj) {
var wb; // 存放解析后的excel數(shù)據(jù)
if(!obj.files) {
return;
}
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
//將文件讀取為二進制字符串
wb = XLSX.read(data, {
type: 'binary'
});
// wb.SheetNames[0]是獲取第一個Sheet頁的名字
console.log('sheet頁名稱：',wb.SheetNames[0]);
// wb.Sheets[Sheet名]：獲取對應Sheet頁的數(shù)據(jù)
var dataArr = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
console.log('當前sheet頁數(shù)據(jù)：',dataArr);
dataArr.forEach((item,index)=>{
console.log(`第${index+1}行數(shù)據(jù):`,item)
})
};
reader.readAsBinaryString(f);
}
此時青抛，我們已經(jīng)拿到了想要的json數(shù)據(jù)格式旗闽，可以對網(wǎng)頁進行數(shù)據(jù)渲染。之后的操作各有不同蜜另，就不繼續(xù)往下寫了适室，根據(jù)自己的需求處理即可。
至此举瑰，功能實現(xiàn)捣辆，特此記錄！
