美文网首页我爱编程
input file组件选中Excel文件后,通过Bootstr

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

作者: 李北北 | 来源:发表于2018-05-17 17:00 被阅读0次

    项目中有一个功能是选中一个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改变上传文件按钮样式,并显示已上传文件名

    最终效果如下

    相关文章

      网友评论

        本文标题:input file组件选中Excel文件后,通过Bootstr

        本文链接:https://www.haomeiwen.com/subject/ugzbdftx.html