痛点：在录入数据时，靠人工将excel表格的内容复制到网页上，耗费人力及时间成本，且长时间操作后，准确率得不到保障。
需求：在网页将Excel导入后，表格字段自动填充到网页的对应位置。

本文将着重介绍Excel文件导入及将导入数据转换为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数据
    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页的数据
        var dataArr = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        console.log('当前sheet页数据：',dataArr);
        
        dataArr.forEach((item,index)=>{
            console.log(`第${index+1}行数据:`,item)
        })
        
    };
    reader.readAsBinaryString(f);
}

此时，我们已经拿到了想要的json数据格式，可以对网页进行数据渲染。之后的操作各有不同，就不继续往下写了，根据自己的需求处理即可。

至此，功能实现，特此记录！