众所周知 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. [Android L or M ]解除SwitchPreference与Preference的绑定事件

    需求描写叙述 默认情况,Android的两个控件SwitchPreference和CheckBoxPreference的事件处理是和Preference整个区域的事件绑定在一起的,然而,有时须要将其事 ...

  2. Zepto Code Rush 2014-A. Feed with Candy（HACK）

    A. Feed with Candy time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  3. Myeclipse中解决spring配置文件无提示问题

    相信非常多人都遇到过在部署spring框架写spring的配置文件时无提示内容的问题,都是仅仅能提示一些标签 名,而无法提示属性值,bz我本人今天也遇到了这种问题.在网上找了非常久答案,非常多方法都不 ...

  4. Kids Store - OpenCart 自适应主题模板 ABC-0022

    KIDS STORE - OPENCART 自适应主题模板 ABC-0022 FEATURES Get FREE Lifetime Updates Get FREE On-Going Support ...

  5. tensorflow移植到ios

    1.git clone到本地 git clone https://github.com/tensorflow/tensorflowxcode 2.compile static library 安装xc ...

  6. html5--视频播放器实例

    html5--视频播放器实例 总结: 1.相对定位和绝对定位的区别,两者都是浮起来了 2.属性和方法都是有对象的,搞清楚对象之后,属性和方法就很好用了,我们一般可以用document.getEleme ...

  7. B3038 上帝造题的七分钟2 线段树

    这就是一道变得比较奇怪的线段树,维护每个区间的最大值和区间和,然后关键在于每次取根号的话数值下降的特别快,不用几次就都是1了,所以每次暴力单点修改,然后直接找区间最大值,假如区间最大值是1的话,就直接 ...

  8. android 从assets和res中读取文件（转）

    1. 相关文件夹介绍      在Android项目文件夹里面,主要的资源文件是放在res文件夹里面的.assets文件夹是存放不进行编译加工的原生文件,即该文件夹里面的文件不会像xml,java文件 ...

  9. Genesis 多边形闭轮廓填充算法

    通过逐行扫描,计算得出直线与多边形相交点进行求解 原理图形如下所示: 相关函数: /// <summary> /// 求点P到线段L距离 /// </summary> /// ...

  10. E20170817-ts

    panel   n. 镶板; 面; (门.墙等上面的) 嵌板; 控制板; inventory n. 清查; 存货清单; 财产目录,财产目录的编制; 存货总值;