【前端】将前台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>

 

posted @ 2019-11-09 22:52  孙可帅  阅读(1592)  评论(0编辑  收藏  举报