【前端】将前台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>
【前端】将前台table数据导出excel表格的更多相关文章
- 前端Table数据导出Excel使用HSSFWorkbook(Java)
一.实现原理: 1. 前端查询列表数据并渲染至table(<table>...</table>)表格 2. 表格html代码传输至后台 3. 后台把html转成Excel输出流 ...
- 使用POI实现数据导出Excel表格
package cn.sh.bzt.kwj.action; import java.io.IOException; import java.io.OutputStream; import java.t ...
- Vue项目中将table组件导出Excel表格以及打印页面内容
体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...
- thinkphp5.0数据导出excel表格
第一步.创建Model类文件(名称自定) 第二步.在类中写入以下代码 <?php namespace Admin\admin\model; use think\Model; class Mark ...
- 一个php文件就可以把数据库的数据导出Excel表格
数据库内容太多,复制粘贴太麻烦?那就用代码实现把,把代码写好了,导出还不容易吗,访问即可导出. excel.php <?php error_reporting(E_ALL ^ E_DEPRECA ...
- 数据导出Excel表格
public String exportInfoFr(String path,String name,String startdate,String enddate,SysUser user){ Li ...
- 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; ...
- Java导出数据生成Excel表格
事先准备: 工具类: package com.wazn.learn.util.export; import java.sql.Connection; import java.sql.DriverMan ...
- vue 纯前端导出 excel 表格
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...
随机推荐
- 高通平台sensor框架图【学习笔记】
- Linux环境下安装python3
1.安装前准备 CentOS 7 中默认安装了 Python,版本:2.7.5,由于很多基本的命令.软件包都依赖旧版本,比如:yum.所以,在更新 Python 时,建议不要删除旧版本,而且新旧版本可 ...
- spring mvc中添加对Thymeleaf的支持
一.下载Thymeleaf 官方下载地址:https://dl.bintray.com/thymeleaf/downloads/thymeleaf/ 我下载的是最新的3.0.11版本 把包里的jar包 ...
- Qt开发经验小技巧41-50
如果使用sqlite数据库不想产生数据库文件,可以创建内存数据库. QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); ...
- shell基础知识之数组
数组允许脚本利用索引将数据集合保存为独立的条目.Bash支持普通数组和关联数组,前者 使用整数作为数组索引,后者使用字符串作为数组索引.当数据以数字顺序组织的时候,应该使 用普通数组,例如一组连续的迭 ...
- 零基础C#网站开发实战教学(全套)最新更新2019-12-16。。。
这是林枫山自己编写制作的全套Visual Studio 2013 C# 网站开发案例实战教学教程,欢迎下载学习. 下载目录链接如下(如果链接下载不了,请加QQ:714259796获取教程): 网站界面 ...
- 负载均衡Nginx和F5的区别
今早上看书,看到为了保证Zuul的高可用性,在Zuul的前端可以使用Nginx或F5再次进行负载转发 使用过Nginx,那F5是什么,他们有什么区别吗? (1)F5 F5负载均衡器是应用交付网络的全球 ...
- BlackBerry Key2 键盘扩展
概述 BlackBerry Key2 键盘扩展是为BlackBerry Key2输入物理键盘上缺少的键而制作的输入法. BlackBerry Key2键盘和内置输入法是为商业环境而设计的,缺少桌面计算 ...
- 微服务, 架构, 服务治理, 链路跟踪, 服务发现, 流量控制, Service Mesh
微服务, 架构, 服务治理, 链路跟踪, 服务发现, 流量控制, Service Mesh 微服务架构 本文将介绍微服务架构和相关的组件,介绍他们是什么以及为什么要使用微服务架构和这些组件.本文侧 ...
- XGBoost中参数调整的完整指南(包含Python中的代码)
(搬运)XGBoost中参数调整的完整指南(包含Python中的代码) AARSHAY JAIN, 2016年3月1日 介绍 如果事情不适合预测建模,请使用XGboost.XGBoost算法已 ...