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

一、加入依賴：

<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;
        }
    };

四、最終效果：