input file组件选中Excel文件后，通过Bootstr

项目中有一个功能是选中一个Excel文件后，在页面中展示其内容，我们的列表数据都是使用Bootstrap Table展示的，于是就研究了一下怎么结合Bootstrap Table实现这个功能，最后终于搞定了，下面是实现代码

    <div class="row" style="margin-left: 0px; margin-right: 5px;">
      <div class="file-container" style="display:inline-block;position:relative;overflow: hidden;vertical-align:middle">
        <button class="btn btn-mini btn-success fileinput-button" type="button">导入人员</button>
        <input type="file" id="excel" onchange="loadFile(this.files[0])" style="position:absolute;top:0;left:0; opacity:0">
        <span id="filename" style="vertical-align: middle">未上传文件</span>
      </div>
       
      <div>
        <table id="dataGrid" class="table text-nowrap"></table>
      </div>
    </div>
  
    <script type="text/javascript">
        function loadFile(file){
            $("#filename").html(file.name);
        }   
    
        $(function() {
            $('#dataGrid').bootstrapTable({
                toolbar : '#toolbar',
                height : 330,
                striped : true,
                pagination : true,
                pageSize : 10,
            //  sortName : 'userName',
                sidePagination : 'client',
                columns : [ 
                    {
                        field : 'userName',
                        title : '用户名称'
                    }, 
                    {
                        field : 'userMobile',
                        title : '手机号'
                    },
                    {
                        title : "操作",
                        formatter : function(value, row, index){
                            var str = "";
                            str += "<a onclick='del(\"userPhone\", \"" + row.userPhone + "\");' "
                            + "href='javascript:void(0);' class='btn btn-mini btn-danger' >"
                            + "删除" + "</a>";
                            return str;
                        }
                    }
                ]
            });
        });
        
        //删除一行数据
        function del(field, value){
            $('#dataGrid').bootstrapTable('remove', {field: field, values: [value]});
        }
        
        //加载数据
        function loadData(rows) {
            $('#dataGrid').bootstrapTable('load', rows);
        }
        
    </script>
    
    <script type="text/javascript">
        //捕捉文件组件更改事件, 如果文件发生改变, 就获取文件内容
        $("#excel").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表格对象
                        rows = []; // 存储获取到的数据
                } catch (e) {
                    console.log('文件类型不正确' + e);
                    bootbox.alert('文件类型不正确');
                    return;
                }
                // 表格的表格范围，可用于判断表头是否数量是否正确
                var fromTo = '';
                // 遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]['!ref'];
                        rows = rows.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        break; // 如果只取第一张表，就取消注释这行
                    }
                }
                for(var i=0; i<rows.length; i++) {
                    rows[i].userName = rows[i].用户名称;
                    rows[i].userMobile = rows[i].手机号;
                    rows[i].userPhone = rows[i].用户名称 + rows[i].手机号;
                }
                
                //加载数据到表格
                loadData(rows);
            };
            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);   
        });
    </script>
    

注：除了要引入bootstrap以及bootstrap table相关的js、css文件外，还需要引入专门用于处理excel文件的js插件 xlsx.core.min.js，点击进去右键网页另存为到本地，复制到项目中合适的文件夹，然后就可以引用了。

参考文章：
1、Bootstrap Table通过JS生成数据源并且加载到表格中，采用client方式分页
2、使用js-xlsx库，前端读取Excel报表文件
3、bootstrap改变上传文件按钮样式，并显示已上传文件名

最终效果如下