众所周知 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. c/c++ 数据结构之位图（bitmap）具体解释

    1.  概述 位图(bitmap)是一种很经常使用的结构,在索引.数据压缩等方面有广泛应用. 本文介绍了位图的实现方法及其应用场景. 2. 位图实现 2014728101320" alt=& ...

  2. [WebView学习之二]:使用Web Apps 支持不同分辨率屏

    上一篇我们学习了(1.[WebView学习之中的一个]:Web Apps简单介绍),今天我们来继续学习. (博客地址:http://blog.csdn.net/developer_jiangqq),转 ...

  3. Android 下使用opencv

    两种方式: 1.java API 2.Native/C++ 方式,OpenCV.mk中默认使用动态库的方式链接opencv,设置OPENCV_LIB_TYPE:=STATIC 以静态库方式调用 htt ...

  4. 哈理工2015暑假集训 zoj 2975 Kinds of Fuwas

    G - Kinds of Fuwas Time Limit:2000MS    Memory Limit:65536KB    64bit IO Format:%lld & %llu Subm ...

  5. 将byte[]转为各种进制的字符串

    /**      * 将byte[]转为各种进制的字符串      * @param bytes byte[]      * @param radix 基数可以转换进制的范围(2-36),从Chara ...

  6. 深入理解Android开发中的CoordinatorLayout Behavior

    在使用Android设计支持库(Android Design Support Library)时,很难避开CoordinatorLayout:设计库中有很多视图都需要CoordinatorLayout ...

  7. C# winform KeyPress 事件中对应的数字

    C#  winform KeyPress 事件中对应的数字所有e.KeyChar值的意思 常用ASCII码表 你自己看看应该就明白了 键盘 ASCII码 键盘 ASCII码 ESC 27 7 55 S ...

  8. 在Twitter信息流中大规模应用深度学习——推文的相关度计算使用了深度学习

    我们如何对信息流进行排序? 在引入排序算法之前,信息流的组成非常简单:收集所有由你的关注对象在你最后一次登录Twitter之后发送的推文,再将它们按照时间倒序显示出来.这个看起来很简单,但要为数以亿计 ...

  9. 动态title

    <html><head><meta charset="uft8"><title>测试title</title></ ...

  10. 关于我们ajax异步请求的方法与知识

      做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school ...