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. js - 常用工具集功能函数

    Note [普通JSON数组插入指定位置并且合并] let arr = [{ a: 11 }, { a: 11 }, { a: 11 }, { a: 117 }, { a: 11 }, { a: 11 ...

  2. JS 生成随机字符串 随机颜色

    使用Math.random()生成随机数 0.7489584611780002数字的.toString(n) 将数字转换为 n 进制的字符串 n取值范围(0~36)"0.vbpjw8lipf ...

  3. Vue基础知识学习笔记

    一.环境搭建1.安装nodejs ((https://nodejs.org/en/)2.安装脚手架 npm install --global vue-cli /cnmp install --globa ...

  4. Python 处理异常栈模块——traceback 模块

    异常捕捉 通常我们在项目中,针对异常的捕捉会使用 try + except,基本形式如下: try: # 主代码 except IndexError as e: # 索引异常时执行这里 logger. ...

  5. Linux命令-nohup和&

    基础 在linux终端或控制台上执行命令时,可能不希望脚本占住屏幕需要在后台执行脚本,有几种方法让脚本在后台执行: & 当在前台运行某个作业时,终端被该作业占据:可以在命令后面加上& ...

  6. shell基础知识之 stdin,stdout,stderr和文件描述符

    stdin,stdout,stderr stdin=0 stdout=1 stderr=2 使用tee来传递内容,把stdout 作为stdin 传到下个命令 root@172-18-21-195:/ ...

  7. MySQL高效分页-mybatis插件PageHelper改进

    MySQL分页在表比较大的时候,分页就会出现性能问题,MySQL的分页逻辑如下:比如select * from user limit 100000,10 它是先执行select * from user ...

  8. 深入理解Python变量与常量

    深入理解Python变量与常量 变量是计算机内存中的一块区域,变量可以存储规定范围内的值,而且值可以改变.基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中.常量是一块只读的内 ...

  9. 玩转Linux

    玩转Linux操作系统 说明:本文中对Linux命令的讲解都是基于名为CentOS的Linux发行版本,我自己使用的是阿里云服务器,系统版本为CentOS Linux release 7.6.1810 ...

  10. SecureCRT-登录unix/linux服务器主机的软件

    百度百科说辞: SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单地说是Windows下登录UNIX或Linux服务器主机的软件. SecureCRT支持SSH,同时支持Te ...