痛點(diǎn)：在錄入數(shù)據(jù)時(shí)，靠人工將excel表格的內(nèi)容復(fù)制到網(wǎng)頁上，耗費(fèi)人力及時(shí)間成本，且長時(shí)間操作后，準(zhǔn)確率得不到保障。
需求：在網(wǎng)頁將Excel導(dǎo)入后，表格字段自動(dòng)填充到網(wǎng)頁的對應(yīng)位置。

本文將著重介紹Excel文件導(dǎo)入及將導(dǎo)入數(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核心代碼；

// 導(dǎo)入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;
        //將文件讀取為二進(jìn)制字符串
        wb = XLSX.read(data, {
            type: 'binary'
        });
        
        // wb.SheetNames[0]是獲取第一個(gè)Sheet頁的名字
        console.log('sheet頁名稱：',wb.SheetNames[0]);
        
        // wb.Sheets[Sheet名]：獲取對應(yīng)Sheet頁的數(shù)據(jù)
        var dataArr = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        console.log('當(dāng)前sheet頁數(shù)據(jù)：',dataArr);
        
        dataArr.forEach((item,index)=>{
            console.log(`第${index+1}行數(shù)據(jù):`,item)
        })
        
    };
    reader.readAsBinaryString(f);
}

此時(shí)，我們已經(jīng)拿到了想要的json數(shù)據(jù)格式，可以對網(wǎng)頁進(jìn)行數(shù)據(jù)渲染。之后的操作各有不同，就不繼續(xù)往下寫了，根據(jù)自己的需求處理即可。

至此，功能實(shí)現(xiàn)，特此記錄！