网页中导入本机Excel，并用bootstrap table 显示

@ [TOC](网页中导入本机Excel，并用bootstrap table 显示)

html

 <div class="table-box" style="margin: 5px">
        <div class="toolbar" style="width: 100%; margin-left: 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-center; justify-content: space-between;">
            <button id="new" class="btn btn-success"> New </button>
            <button id="remove" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" disabled>
                <i class="glyphicon glyphicon-remove"></i> Delete
            </button>
            <button id="getTableData" class="btn btn-primary" data-toggle="modal" data-target="#saveModal"> Save
            </button>
            
            <div>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
                            data-toggle="dropdown">导入Excel</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">导入MRP_Calculation</a>
                            <input type="file" name="loadMRP" id="MRP-file">
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">导入Parts</a>
                            <input type="file" name="loadParts" id="Parts-file">
                            <div class="dropdown-divider"></div>

                            <a class="dropdown-item" href="#">导入Spicke_Order</a>
                            <input type="file" name="loadSpicke" id="Spicke-file">
                            <div class="dropdown-divider"></div>

                            <a class="dropdown-item" href="#">导入NPI</a>
                            <input type="file" name="loadNPI" id="NPI-file">

                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <table id="table" class="table-striped " style="table-layout:auto; font-size:0.8rem;">

                </table>
            </div>
        </div>
    </div>
    </div>

引入的插件及CSS

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="Files/popper.min.js"></script>
    <script src="Files/xlsx.full.min.js"></script>
    <script type="text/javascript" src="xlsx.core.min.js"></script>

    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="Files/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="Files/bootstrap-table.min.css" crossorigin="anonymous">

    <script type="text/javascript" src="Files/bootstrap.min.js"></script>
    <script type="text/javascript" src="Files/bootstrap-table.min.js"></script>
    <script src="Files/bootstrap-table-export.min.js"></script>
    <link href="Files/toastr.min.css" rel="stylesheet">
    <script src="Files/toastr.min.js"></script>

style

<style>
       .table .thead-blue th {
           color: #fff;
           background-color: #3195f1;
           border-color: #0d7adf;
           font-size: 0.6rem
       }

       .focusCell {
           border: 2px solid rgb(122, 124, 241) !important;
       }

       .dropdown-menu a {
           color: royalblue
       }
   </style>

JS

 <script>
        $(function () {

            var $table = $('#table')
            var loadData = []
            var tableColumns = []
            var unvisibleColumn = ['WK1_QTY', 'WK1_BALANCE', 'WK2_QTY', 'WK2_BALANCE', 'WK3_QTY', 'WK3_BALANCE', 'WK4_QTY', 'WK4_BALANCE',
                'WK5_QTY', 'WK5_BALANCE', 'WK6_QTY', 'WK6_BALANCE', 'WK7_QTY', 'WK7_BALANCE', 'WK8_QTY', 'WK8_BALANCE', 'WK9_QTY',
                'WK9_BALANCE', 'WK10_QTY', 'WK10_BALANCE', 'WK11_QTY', 'WK11_BALANCE', 'WK12_QTY', 'WK12_BALANCE', 'WK13_QTY', 'WK13_BALANCE']
            function Columns_Data(excelData) {
                var oneBuyerData = []

                var keys = tHead(excelData[0]);

                addColumnStyle = function (value, row, index, field) {
                    return { css: { "color": "blue" } }
                }

                tableColumns.push({ checkbox: true })
                $.each(keys, function (i, key) {
                    var column = {};
                    if ((key.substr(0, 2) == "WK") && (key.substr(key.length - 3, 3) == "QTY")) {
                        var addColumn = {}
                        addColumn['field'] = key.substr(0, key.length - 3) + "PO"
                        addColumn['title'] = key.substr(0, key.length - 3) + "PO"
                        addColumn['cellStyle'] = 'addColumnStyle'
                        addColumn['sortable'] = true;
                        addColumn['align'] = 'center';
                        tableColumns.push(addColumn)
                    }
                    if (unvisibleColumn.indexOf(key) >= 0) {
                        column['visible'] = false
                    }
                    column['field'] = key;
                    column['title'] = key;
                    column['sortable'] = true;
                    column['align'] = 'center';
                    if (key == 'SUPPLIER') {
                        // column['width'] = '100px';
                        column['align'] = 'left';
                    }
                    tableColumns.push(column)
                })

                $.each(excelData, function (i, item) {
                    if ($.trim(item.BUYER_NAME) == $.trim($("#buyer").text())) {
                        oneBuyerData.push(item)
                    }
                })

                $table.bootstrapTable('refreshOptions', {
                    columns: tableColumns,
                    data: oneBuyerData
                })
            }

            // $table.on('all.bs.table', function (e, name, args) {
            //     console.log(name, args)
            // })

            $table.on('post-header.bs.table', function () {
                $("#table td").attr('contenteditable', true);
            })

            // $table.on('click-cell.bs.table', function (obj, field, value, row, $element) {
            //     $element.css('border', '1px solid redred')
            // })

            $('#table').on('click', 'td', function () {
                $(this).addClass('focusCell')
            })

            $('#table').on('blur', 'td', function () {
                $(this).removeClass('focusCell')
            })

            $table.bootstrapTable({
                // url: "json/data1.json",
                data: loadData,
                toolbar: ".toolbar",
                locale: "en-US",
                clickEdit: true,
                showRefresh: true,
                showColumns: true,
                search: true,
                pagination: true,       //显示分页条
                paginationVAlign: "top",
                showPaginationSwitch: true,     //显示切换分页按钮
                clickToSelect: true,  //点击row选中radio或CheckBox
                showExport: true,
                pageSize: 100,//每页默认条数
                pageNumber: 1,//默认打开y页面
                showExport: true,
                contentEditable: true,
                stickyHeader: true,
                theadClasses: "thead-blue",//设置thead-blue为表头样式
                columns: tableColumns,
                height: screen.availHeight - 110
            })

            $('#MRP-file').change(function (e) {
                var files = e.target.files;
                var fileReader = new FileReader();
                fileReader.onload = function (ev) {
                    try {
                        var data = ev.target.result
                        workbook = XLSX.read(data, {
                            type: 'binary'
                        }) // 以二进制流方式读取得到整份excel表格对象
                        persons = []; // 存储获取到的数据
                    } catch (e) {
                        console.log('文件类型不正确');
                        return;
                    }
                    // 表格的表格范围，可用于判断表头是否数量是否正确
                    var fromTo = '';
                    // 遍历每张表读取
                    for (var sheet in workbook.Sheets) {
                        if (workbook.Sheets.hasOwnProperty(sheet)) {
                            fromTo = workbook.Sheets[sheet]['!ref'];
                            console.log(fromTo);
                            persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                            // break; // 如果只取第一张表，就取消注释这行
                        }
                    }
                    loadData = persons;
                    // console.log(loadData)
                    Columns_Data(loadData)
                    console.log(tableColumns)

                };
                // 以二进制方式打开文件
                fileReader.readAsBinaryString(files[0]);
            });

            function tHead(data) {      //------------获得Excel数据的表头
                var h = new Array();
                var ii = 0;
                $.each(data, function (i, item) {
                    h[ii] = i;
                    ii = ii + 1;
                })
                return h;
            }

        })
    </script>

效果

新手上路，不喜勿喷。