众所周知 layui的导出功能很好用，但是今天我要给大家推荐一个更好用的

大家来到这里想必也是因为layui无法满足 【导出Excle复杂表头】 的业务需求而来，这里废话不多说但还是强调一点，如果你是用的layui服务渲染的表格如：

这种情况个人建议移步至 阿政kris*的博客

首先 下载案例

把文解压 来到 demo目录下,复制以下内容到 index.html 文件



<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>table2excel | rusty1s</title>

		<link rel="stylesheet" type="text/css" href="style.css" />

		<script src="../dist/table2excel.js"></script>

	</head>

	<body>

		<table data-excel-name="A very important table">

			<thead>

				<tr>

					<th><span>1</span></th>

					<th>2</th>

					<th>3</th>

					<th>4</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<th>a</th>

					<td data-timestamp="1468834644032">18.07.2016 11:37:24</td>

					<td>a2</td>

					<td style="display: none">hidden</td>

					<td>a3</td>

				</tr>

				<tr>

					<th>b</th>

					<td colspan="2">b1+b2</td>

					<td>b3</td>

				</tr>

				<tr>

					<th>c</th>

					<td rowspan="2">c1+d1</td>

					<td>c2</td>

					<td rowspan="2">c3+d3</td>

				</tr>

				<tr>

					<th>d</th>

					<td>d2</td>

				</tr>

			</tbody>

			<tfoot>

				<tr>

					<td colspan="4">4 entries</td>

				</tr>

			</tfoot>

		</table>

		<table data-excel-name="Another table">

			<thead>

				<tr>

					<th>1</th>

					<th>2</th>

					<th>3</th>

					<th>4</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<th>e</th>

					<td>e1</td>

					<td>e2</td>

					<td>e3</td>

				</tr>

				<tr>

					<th>f</th>

					<td><input type="text" value="f1" /></td>

					<td>

						<select>

							<option>f2.1</option>

							<option>f2.2</option>

							<option>f2.3</option>

						</select>

					</td>

					<td><textarea>f3</textarea></td>

				</tr>

			</tbody>

			<tfoot>

				<tr>

					<td colspan="4">2 entries</td>

				</tr>

			</tfoot>

		</table>

		<table data-excel-name="A very important table" class="layui-table" id="Out_data">

		<thead>

	    <tr>

	      <th lay-data="{field:'username', width:80}" rowspan="3">联系人</th>

	      <th lay-data="{field:'amount', width:120}" rowspan="3">金额</th>

	      <th lay-data="{align:'center'}" colspan="5">地址1</th>

	      <th lay-data="{align:'center'}" colspan="2">地址2</th>

	      <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="3">操作</th>

	    </tr>

	    <tr>

	      <th lay-data="{field:'province'}" rowspan="2">省</th>

	      <th lay-data="{field:'city'}" rowspan="2">市</th>

	      <th lay-data="{align:'center'}" colspan="3">详细</th>

	      <th lay-data="{field:'province'}" rowspan="2">省</th>

	      <th lay-data="{field:'city'}" rowspan="2">市</th>

	    </tr>

	    <tr>

	      <th lay-data="{field:'street'}" >街道</th>

	      <th lay-data="{field:'address'}">小区</th>

	      <th lay-data="{field:'house'}">单元</th>

	    </tr>

	  </thead>

			<tbody>

				<tr >

					<td >

						<div >张小三</div>

					</td>

					<td >

						<div >18</div>

					</td>

					<td >

						<div >浙江</div>

					</td>

					<td >

						<div >杭州</div>

					</td>

				<td >

						<div >西溪街道</div>

					</td>

					<td data-field="address" data-key="2-2-1" class="">

						<div class="layui-table-cell laytable-cell-2-2-1">西溪花园</div>

					</td>

					<td data-field="house" data-key="2-2-2" class="">

						<div class="layui-table-cell laytable-cell-2-2-2">30栋1单元</div>

					</td>

					<td data-field="province" data-key="2-1-3" class="">

						<div class="layui-table-cell laytable-cell-2-1-3">浙江</div>

					</td>

					<td data-field="city" data-key="2-1-4" class="">

						<div class="layui-table-cell laytable-cell-2-1-4">杭州</div>

					</td>

					<td data-field="4" data-key="2-0-4" align="center" data-off="true" class="layui-table-col-special">

						<div class="layui-table-cell laytable-cell-2-0-4">

							<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

							<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

						</div>

					</td>

				</tr>	

				</tbody>

		</table>

		<button id="export">Export to excel</button>

		<script>

			var table2excel = new Table2Excel();

			document.getElementById('export').addEventListener('click', function() {

				table2excel.export(document.getElementById('Out_data'));

			});

		</script>

	</body>

</html>

运行即可

温馨提示 如果下载的Excle 无法打开 请解除绑定

layui 导出excel复杂表头的更多相关文章

  1. 【每日一点】1. Java如何实现导出Excel单表头或多表头

    一.背景 在后台项目中,经常会遇到将呈现的内容导出到Excel的需求,通过都是导出单个表头的Excel文件,如果存在级联关系的情况下,也就需要导出多表头的场景.今天这篇文章就是分享导出Excel单表头 ...

  2. Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"

    Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...

  3. JAVA POI导出EXCEL 动态表头、多级表头、动态数据

    导出Excel文件是业务中经常遇到的需求,以下是经常遇到的一些问题: 1,导出中文文件名乱码 String filename = "sheet1";response.setChar ...

  4. poi导出excel，表头数据动态拼装

    /* * 第一步:拼装表头和数据 */ // 放多个sheet的集合 List<Map<String,Object>> datas = new ArrayList<Map ...

  5. js导出excel增加表头、mso-number-format定义数据格式

    问题1:增加表头 js导出表格时,只会导出table里的展现出的内容,如需增加表头等内容需要在页面获取的字符串中拼接表头的相关字符串,详细介绍如下: tableString:新增的表头内容字符串: c ...

  6. NPOI导出Excel合并表头写入公式

    protected void Btn1_Click(object sender, EventArgs e) { //建立空白工作簿 IWorkbook workbook = new HSSFWorkb ...

  7. java导出excel,多表头合并

    要求结果图如下: 有空补充具体逻辑 参考:https://blog.csdn.net/dj0721/article/details/72463042 HSSFColor  背景颜色选择  参考:htt ...

  8. NPOI2.0导出excel之添加样式、边框和表头

    //优化后导出excel public System.IO.Stream ExcelStream(string search) // { var orderBusiniss = Containers. ...

  9. yii2 数据导出 excel导出以及导出数据时列超过26列时解决办法

    作者:白狼 出处:http://www.manks.top/article/yii2_excel_extension​ 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

随机推荐

  1. web 文件上传组件 Plupload

    Plupload官网:点击打开链接   建议下载最新版本号,低版本号会出现浏览器兼容问题. 近期公司有个项目须要在web端使用多文件上传功能.刚開始准备使用HTML5来做.但是IE9下面是都不支持的, ...

  2. jenkins配置邮箱遇到的问题

    错误一:发送测试邮件测试配置没有填写接收者的邮箱 原因:没有写接收者的邮箱 2.写了接受者的邮箱 密码错误 解决办法:qq邮箱>设置>账户,发送短信后点我已发送,就会接收到密码 3.发送时 ...

  3. Caused by: java.lang.UnsatisfiedLinkError: Couldn&#39;t load BaiduMapVOS_v2_1_3: findLibrary returned nu

    在使用百度地图进行开发的时候.假设遇到了 Caused by: java.lang.UnsatisfiedLinkError: Couldn't load BaiduMapVOS_v2_1_3: fi ...

  4. luogu1169 棋盘制作

    题目大意 有一个有m*n个格子的矩形,每个格子都有黑或白两种颜色.现要求将该矩形分别裁剪成一个小矩形或一个小正方形,使得这个矩形和正方形是个国际象棋棋盘,且面积最大. 题解 首先,为了简化问题,我们每 ...

  5. Android updater-scripts(Edify Script)各函数详细说明【转】

    本文转载自:http://blog.csdn.net/kwuwei/article/details/40616909 这是Android系统来运行updater-scripts的Edify语言的基本介 ...

  6. C# Interactive Walkthrough

    C# Interactive Walkthrough

  7. vs2010永久删除项目的相关操作

    1.选中要删除的项目,在解决方案资源管理器中,直接左键点击一下即可.. 2.点击键盘的删除键“DElect”. 3.然后找到工程的目录后,删除项目.即可永久性删除不在需要的程序或者是项目.

  8. C# List常识之经常被忽略的常识

    最近在接收前辈的代码,越来越会发现有很多.net已经封装好的方法可以使用,我们却不知道,然后自己去For/Foreach循环解决自己的需求问题 总的来说:当下很忧伤啊.总结了几个经常需要用却不知道的方 ...

  9. Docker 探索安装WordPress+Mysql8.0

    拉取MYSQL,注意默认是8.0版本,连接加密方式有变化 docker pull mysql 运行MYSQL docker run --name wordpress-mysql -p 3306:330 ...

  10. Django中关于MySQL的bug总结

    bug one: You are trying to add a non-nullable field 'height' to person without a default; we can't d ...