【前端】將前臺table數據導出excel表格

1.首先引用jquery以及table2excel

<script type="text/javascript" src="js/jquery.table2excel.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

2.表格部分

<table  lay-filter="demo" class="layui-table"  id="excTable">
                <thead>
                <tr >
                    <th lay-data="{field:'emp_ICNumber', width:150, sort:true}">工號</th>
                    <th lay-data="{field:'emp_Name', width:150, sort:true}">姓名</th>
                    <th lay-data="{field:'emp_WorkTeam', width:100, sort:true}">班次</th>
                    <th lay-data="{field:'emp_AlcoholStatus', width:100, sort:true}">考勤方式</th>
                    <th lay-data="{field:'emp_Cause', width:150, sort:true}">考勤狀態</th>
                    <th lay-data="{field:'emp_TestDateTime', width:200, sort:true}">考勤時間</th>
                    <th lay-data="{field:'emp_workHours', width:100, sort:true}">工時</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${maps[0].attences}" var="model">
                    <tr>
                        <%--<td style="display: none">${model.id}</td>--%>
                        <td>${model.emp_ICNumber}</td>
                        <td>${model.emp_Name}</td>
                        <td>${model.emp_WorkTeam}</td>
                        <c:if test="${model.emp_AlcoholStatus=='0'}">
                            <td>正常</td>
                        </c:if>
                        <c:if test="${model.emp_AlcoholStatus=='1'}">
                            <td>飲酒</td>
                        </c:if>
                        <c:if test="${model.emp_AlcoholStatus=='2'}">
                            <td>醉酒</td>
                        </c:if>
                        <c:if test="${model.emp_AlcoholStatus=='4'}">
                            <td>手動添加,未監測</td>
                        </c:if>
                        <td>${model.emp_Cause}</td>
                        <td>${model.emp_TestDateTime}</td>
                        <td>${model.emp_workHours}</td>

                    </tr>
                </c:forEach>
                </tbody>
            </table>

       以上有用的部分只有數據和id，其餘內容能夠不考慮。

    function etest() {
        $("#excTable").table2excel({
            exclude: ".id",
            name: "Excel Document Name",
            filename: "考勤表",
            fileext: ".xls",
            columns: "0,1,7,9,10,11,12",//指定不導出列 實例：columns: "0,1,2,3",下標從0開始，表明不導出第一列--第四列
            exclude_img: false,
            exclude_links: false,
            exclude_inputs: false
        });
    }
//      table2excel插件的可用配置參數有：
//
//            exclude：不被導出的表格行的CSS class類。
//            name：導出的Excel文檔的名稱。
//            filename：Excel文件的名稱。
//            exclude_img：是否導出圖片。
//            exclude_links：是否導出超連接
//            exclude_inputs：是否導出輸入框中的內容。

 

以上在加一個按鈕就可使用表格導出功能了

<button class="layui-btn" onclick="etest()">導出</button>