利用js-xlsx解析文件（excel）

安装

//CDN
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.core.min.js"></script>
//npm
npm install xlsx

使用

    let uploadDivStr = `<div id="UploadTableDiv" style=" height:330px;"><div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="ID-upload-demo-files">选择文件</button>
    <button type="button" class="layui-btn layui-btn-sm" id="ID-upload-demo-files-action">开始上传</button><button type="button" class="layui-btn layui-btn-sm" ><a href="${layui.laytpl.href}" style="color:white">下载模板</a></button>
    
        <input type="file" id="file" style="display:none;"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /></div>
        
                    <table class="layui-table" id="UploadTable-demo" contenteditable></table>
              </div>   
        `

    let uploadDiv = document.createElement('div');
    //业务要求是需要弹出的，所以先隐藏
    uploadDiv.setAttribute('style', 'display:none;padding:15px 10px 0 10px;');
    uploadDiv.setAttribute('id', 'uploadDiv')
    uploadDiv.innerHTML = uploadDivStr;

    document.body.appendChild(uploadDiv);

    //为按钮添加点击事件
    document.getElementById('ID-upload-demo-files').addEventListener('click', function (e) {    
        //触发ipunt的点击事件
        document.getElementById('file').click();


    })


    document.getElementById('file').addEventListener('change', function (e) {
        //读取上传的excel文件
        var files = e.target.files;
        if (files.length == 0) return;
        var f = files[0];
        //验证格式
        if (!/\.xlsx$/g.test(f.name)) {
            alert('仅支持读取xlsx格式！');
            return;
        }
        readWorkbookFromLocalFile(f, function (workbook) {
            readWorkbook(workbook);
        });
    });

    // 读取本地excel文件
    function readWorkbookFromLocalFile(file, callback) {
        //创建实例
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            //这里type的类型要与处理文件时读的data一致，可以更改
            var workbook = XLSX.read(data, { type: 'binary' });
            if (callback) callback(workbook);
        };
        reader.readAsBinaryString(file);
    }
    
    //读取出excel中的数据
    function readWorkbook(workbook) {
        var sheetNames = workbook.SheetNames; // 工作表名称集合
        var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
        //获取json格式的数据
        var json = XLSX.utils.sheet_to_json(worksheet);
        //获取csv格式的数据
        var csv = XLSX.utils.sheet_to_csv(worksheet);
        //document.getElementById('result').innerHTML = csv2table(csv, json);
        
        //根据获取的数据去生成想要的表格
        csv2table(csv, json);
    }

        // 将csv转换成普通表格的html
    // function csv2table(csv) {
    //     var html = '<table class="layui-table" id="uploadTable">';
    //     var rows = csv.split('\n');
    //     // rows.pop(); // 最后一行没用的
    //     for (let key in rows) {
    //         let columns = rows[key].split(',');
    //         if (key == 0) {
    //             html += '<tr>'
    //             columns.forEach(function (column) {
    //                 html += '<th>' + column + '</th>';
    //             });
    //             html += '</tr>'
    //         } else {
    //             html += '<tr>'
    //             columns.forEach(function (column) {
    //                 html += '<td>' + column + '</td>';
    //             });
    //             html += '</tr>'
    //         }
    //     }
    //     html += '</table>';
    //     return html;
    // }
    
    //转化为layui表格
    function csv2table(csv, json) {

        var rows = csv.split('\n');

        let columns = rows[0].split(',');

        let obj = {
            table: {
                'tool': { checkbox: false, numbers: true, width: 200, toolbar: '' }
            },
            tabledata: json,
            config: {
                //是否显示换行
                even: false,
                //表格高度
                height: '#UploadTableDiv-40'
                // , page: true // 是否显示分页
                // , limits: [5, 10, 15, 20, 30] //选择可展示的页面数量
                // , limit: 15 // 每页默认显示的数量
                , th: { 'background-color': 'rgb(242,242,242)', 'color': 'black', 'font-weight': 'bold' } //表头的style
                , skin: 'line' //表格边框样式
            }
        }


        columns.map(c => {
            obj.table[c] = { "title": c, "type": "String", "width": 200, "edit": 'text' }
        })

        layui.laytpl.createUploadTable(obj)

    }