先引入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.匯出效果圖