bootstrap-table中导出excel插件bootstrap-table-export使用

Posted 2021-12-09 cherishzeng

一、加入依赖：

<script src="/static/js/bootstrap-table-export.js"></script>

注意：网上很多版本中，只说明了添加这一个js依赖就好，但在使用过程中，由于会涉及到中文编码、以及bootstrap-table-export.js中继承的是tableExport.js，所以还需要添加下面几个依赖：

<script src="/static/js/tableExport.js"></script>
<script src="/static/js/jquery.base64.js"></script>
<script src="/static/js/html2canvas.js"></script>
<script src="/static/js/base64.js"></script>
<script src="/static/js/sprintf.js"></script>
<script src="/static/js/jspdf.js"></script>

二、最常用到的参数：

        showExport: true,  //是否显示导出按钮
        exportDataType: "all",              //basic‘, ‘all‘, ‘selected‘.
        buttonsAlign:"right",  //按钮位置
        exportTypes:[‘excel‘],  //导出文件类型
        Icons:‘glyphicon-export‘,

三、实例代码：

$(‘#AllMemberAssessInfoTable‘).bootstrapTable({
        url:url,
        search:true,
        method:"post",
        sidePagination:‘client‘,
        responseHandler:responseHandler,//参数
        contentType: ‘application/json;charset=UTF-8‘,
        striped: true,
        pagination: true,
        paginationFirstText: "首页",
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        paginationLastText: "末页",
        onLoadSuccess: function (data) {
//                alert("加载数据成功");
        },
        onLoadError: function(){  //加载失败时执行
            alert("加载数据失败");
        },
        pageNumber:1,
        pageList: [10,30,50,all],
        pageSize:10,
        showExport: true,  //是否显示导出按钮
        exportDataType: "all",              //basic‘, ‘all‘, ‘selected‘.
        buttonsAlign:"right",  //按钮位置
        exportTypes:[‘excel‘],  //导出文件类型
        Icons:‘glyphicon-export‘,
        exportOptions:{
            //ignoreColumn: [0,1],  //忽略某一列的索引
            fileName: ‘员工考评信息‘,  //文件名称设置
            worksheetName: ‘sheet1‘,  //表格工作区名称
            tableName: ‘总台帐报表‘,
            excelstyles: [‘background-color‘, ‘color‘, ‘font-size‘, ‘font-weight‘],
            onMsoNumberFormat: DoOnMsoNumberFormat
        },
        columns:[{field: ‘year‘, title: ‘年份‘,align: ‘center‘,width:100,editable:false},
            {field: ‘batchName‘, title: ‘考评季度‘,align: ‘center‘,width:100,editable:false},
            {field: ‘memberId‘, title: ‘员工号‘,align: ‘center‘,width:100,editable:false},
            {field: ‘memberName‘, title: ‘姓名‘,align: ‘center‘,editable:false},
            {field: ‘selfScore‘, title: ‘自评分数‘,align: ‘center‘,editable:false},
            {field: ‘leaderScore‘, title: ‘主管评分‘,align: ‘center‘,editable:false},
            {field: ‘teamScore‘, title: ‘互评评分‘,align: ‘center‘,editable:false},
            {field: ‘okrScore‘, title: ‘okr评分‘,align: ‘center‘,editable:false},
            {field: ‘endScore‘, title: ‘最终得分‘,align: ‘center‘,editable:false},
            {field: ‘leaderName‘, title: ‘主管‘,align: ‘center‘,editable:false}],
        onDblClickRow:function (row) {
        },
        onEditableSave:function (field, row, oldValue, $el) {
        }
    });

    function operateFormatter(value, row, index) {
        return [
            ‘<button type="button" class="RoleOfA btn btn-xs btn-success lookDetail">查看</button>‘
        ].join(‘‘);
    }
    function DoOnMsoNumberFormat(cell, row, col) {
        var result = "";
        if (row > 0 && col == 0)
            result = "\\\\@";
        return result;
    }
    function responseHandler(res) {
        var rows = [];
        if(!isEmptyObject(res)){
            if(!isEmptyObject(res.msg)){
                alert(res.msg);
            }else{
                if(!isEmptyObject(res.data)){
                    if(!isEmptyObject(res.data[0].assessMembers)){
                        $.each(res.data[0].assessMembers,function(index,value){
                            var row = {};
                            row.batchId = res.data[0].batchId;
                            row.year = res.data[0].year;
                            row.batchName = res.data[0].batchName;
                            if (!isEmptyObject(value)){
                                row.memberId = value.memberId;
                                row.memberName = value.memberName;
                                if(value.selfScore != null)
                                    row.selfScore = value.selfScore;
                                else
                                    row.selfScore = ‘‘;
                                if(value.leaderScore != null)
                                    row.leaderScore = value.leaderScore;
                                else
                                    row.leaderScore = ‘‘;
                                if(value.teamScore != null && value.teamScore != parseFloat(1))
                                    row.teamScore = value.teamScore;
                                else
                                    row.teamScore = ‘‘;
                                if(value.okrScore != null)
                                    row.okrScore = value.okrScore;
                                else
                                    row.okrScore = ‘‘;
                                if(value.endScore != null)
                                    row.endScore = value.endScore;
                                else
                                    row.endScore = ‘‘;
                                row.leaderName = value.leaderName;
                                rows.push(row);
                            }
                        });
                    }
                }
            }
        }

        function isEmptyObject(e) {
            var t;
            for (t in e)
                return !1;
            return !0
        }

        return rows;
    }

    window.operateEvents = {
        ‘click .lookDetail‘: function (e, value, row, index){  //绑定的点击事件
            window.location = "/memberDetail?memberId="+row.memberId;
        }
    };

四、最终效果：