实用插件（十一）table数据导出插件——tableExport

先引入3个js文件：点我下载

<script src="Blob.js"></script>
<script src="FileSaver.js"></script>
<script src="tableExport.js"></script>

1.html:

<table class="table table-striped table-hover" id="table2" style="display:none;">
       <thead>
             <tr>
                <td><strong>序号</strong></td>
                <td><strong>场馆名称</strong></td>
                <td><strong>预约人</strong></td>
                <td><strong>预约时间段</strong></td>
                <td><strong>预约说明</strong></td>
                <td><strong>状态</strong></td>
                <td><strong>分派人</strong></td>
                <td><strong>分派时间</strong></td>
                <td><strong>分派说明</strong></td>
                <td><strong>场馆负责人</strong></td>
                <td><strong>离馆时间</strong></td>
                <td><strong>离馆备注</strong></td>
                <td><strong>离馆操作人</strong></td>
            </tr>
      </thead>
     <tbody id="content">

     </tbody>
</table>
<a id="daochu" class="btn btn-default">导出</a>

---

2.js:

$("#daochu").click(function(){
        initRecordExcel(1,100000);
        tableExport('table2', '场馆预约信息', 'xls');//table的id，导出文件名称，导出文件格式（json、txt、csv、xls、doc）
    });

function initRecordExcel(pageNo,total){
    $.ajax({
        url: baseUrl+"/getNote.htm",
        type: 'POST',
        async:false,
        dataType:'JSON',
        data: {
            "token":token,
            "pageNo":pageNo,
            "pageSize": total,
            "sort":"asc"
        },
        success: function (res) {
            if(res.code == '0'){
                    console.log(res);
                    //主体表格
                var tbodyHtml = "";
                $.each(res.data,function(k,v){
                    tbodyHtml += '<tr>';
                    tbodyHtml += '<td>'+((pageNo-1)*20+k+1)+'</td>';
                    tbodyHtml += '<td>'+v.siteName+'</td>';
                    tbodyHtml += '<td>'+v.bookingPerson+'</td>';
                    tbodyHtml += '<td>'+format(v.startDate)+' - '+format(v.defaultEndDate)+'</td>';
                    tbodyHtml += '<td>'+v.bookingComment+'</td>';
                    tbodyHtml += '<td>'+v.dispatchStatus+'</td>';

                    tbodyHtml += '<td>'+v.dispatchName+'</td>';
                    tbodyHtml += '<td>'+format(v.dispatchDate)+'</td>';
                    tbodyHtml += '<td>'+v.dispatchComment+'</td>';

                    /* tbodyHtml += '<td>'+v.principal+'</td>'; */
                    //负责人(如果1个，直接在td显示姓名；如果多个在td显示总数，提示框显示姓名)
                    tbodyHtml += '<td>';
                        $.each(v.principal,function(k1,v1){
                             $.each(v1,function(k2,v2){
                                 if(k2 == 1){
                                    tbodyHtml += ' '+v2+' ';
                                 }
                             })
                          })
                    tbodyHtml += '</td>';

                    tbodyHtml += '<td>'+format(v.endDate)+'</td>';
                    tbodyHtml += '<td>'+v.overComment+'</td>';
                    tbodyHtml += '<td>'+v.operationPrincipalName+'</td>';

                    tbodyHtml += '</tr>';

                })
                $("#table2 #content").html(tbodyHtml);
            }else{
                console.log(res);
            }
        },
        Error: function (xhr, type, errorThrown) {
            console.log(JSON.stringify(xhr));
            console.log(type);
            console.log(errorThrown);
        }

    });
}

3.导出效果图