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>

【前端】将前台table数据导出excel表格的更多相关文章

  1. 前端Table数据导出Excel使用HSSFWorkbook(Java)

    一.实现原理: 1. 前端查询列表数据并渲染至table(<table>...</table>)表格 2. 表格html代码传输至后台 3. 后台把html转成Excel输出流 ...

  2. 使用POI实现数据导出Excel表格

    package cn.sh.bzt.kwj.action; import java.io.IOException; import java.io.OutputStream; import java.t ...

  3. Vue项目中将table组件导出Excel表格以及打印页面内容

    体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...

  4. thinkphp5.0数据导出excel表格

    第一步.创建Model类文件(名称自定) 第二步.在类中写入以下代码 <?php namespace Admin\admin\model; use think\Model; class Mark ...

  5. 一个php文件就可以把数据库的数据导出Excel表格

    数据库内容太多,复制粘贴太麻烦?那就用代码实现把,把代码写好了,导出还不容易吗,访问即可导出. excel.php <?php error_reporting(E_ALL ^ E_DEPRECA ...

  6. 数据导出Excel表格

    public String exportInfoFr(String path,String name,String startdate,String enddate,SysUser user){ Li ...

  7. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  8. Java导出数据生成Excel表格

    事先准备: 工具类: package com.wazn.learn.util.export; import java.sql.Connection; import java.sql.DriverMan ...

  9. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

随机推荐

  1. 高通平台sensor框架图【学习笔记】

  2. Linux环境下安装python3

    1.安装前准备 CentOS 7 中默认安装了 Python,版本:2.7.5,由于很多基本的命令.软件包都依赖旧版本,比如:yum.所以,在更新 Python 时,建议不要删除旧版本,而且新旧版本可 ...

  3. spring mvc中添加对Thymeleaf的支持

    一.下载Thymeleaf 官方下载地址:https://dl.bintray.com/thymeleaf/downloads/thymeleaf/ 我下载的是最新的3.0.11版本 把包里的jar包 ...

  4. Qt开发经验小技巧41-50

    如果使用sqlite数据库不想产生数据库文件,可以创建内存数据库. QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); ...

  5. shell基础知识之数组

    数组允许脚本利用索引将数据集合保存为独立的条目.Bash支持普通数组和关联数组,前者 使用整数作为数组索引,后者使用字符串作为数组索引.当数据以数字顺序组织的时候,应该使 用普通数组,例如一组连续的迭 ...

  6. 零基础C#网站开发实战教学(全套)最新更新2019-12-16。。。

    这是林枫山自己编写制作的全套Visual Studio 2013 C# 网站开发案例实战教学教程,欢迎下载学习. 下载目录链接如下(如果链接下载不了,请加QQ:714259796获取教程): 网站界面 ...

  7. 负载均衡Nginx和F5的区别

    今早上看书,看到为了保证Zuul的高可用性,在Zuul的前端可以使用Nginx或F5再次进行负载转发 使用过Nginx,那F5是什么,他们有什么区别吗? (1)F5 F5负载均衡器是应用交付网络的全球 ...

  8. BlackBerry Key2 键盘扩展

    概述 BlackBerry Key2 键盘扩展是为BlackBerry Key2输入物理键盘上缺少的键而制作的输入法. BlackBerry Key2键盘和内置输入法是为商业环境而设计的,缺少桌面计算 ...

  9. 微服务, 架构, 服务治理, 链路跟踪, 服务发现, 流量控制, Service Mesh

    微服务, 架构, 服务治理, 链路跟踪, 服务发现, 流量控制, Service Mesh 微服务架构   本文将介绍微服务架构和相关的组件,介绍他们是什么以及为什么要使用微服务架构和这些组件.本文侧 ...

  10. XGBoost中参数调整的完整指南(包含Python中的代码)

    (搬运)XGBoost中参数调整的完整指南(包含Python中的代码) AARSHAY JAIN, 2016年3月1日     介绍 如果事情不适合预测建模,请使用XGboost.XGBoost算法已 ...