众所周知 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. javascript 数组，数组中加入新元素 push() ，unshift() 相当于Add()

    <1> var   a   =   [];     //建立数组 push   方法     将新元素加入到一个数组中,并返回数组的新长度值.

  2. jxl 导入导出Excel（有模板）

    1.导入 @Override public String importBusinessScope(File file, String unit_id) throws Exception { Workb ...

  3. Android+Jquery Mobile学习系列(7)-保险人信息

    [保险人管理]是这个APP最重要的功能,用于保存保险客户的数据,给后面的功能提供数据支撑. 简单说说[保险人管理]功能:主要就是增.删.改.查四个功能,在新增和修改的时候不仅可以保存保险人的姓名.身份 ...

  4. C# 文件的一些基本操作（转）//用C#读写ini配置文件

    C# 文件的一些基本操作 2009-07-19  来自:博客园  字体大小:[大 中 小] 摘要:介绍C#对文件的一些基本操作,读写等. using System;using System.IO;us ...

  5. ZOJ 2314 无源汇可行流（输出方案）

    Time Limit: 5 Seconds      Memory Limit: 32768 KB      Special Judge The terrorist group leaded by a ...

  6. [POI 2008] BLO

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1123 [算法] 首先,如果一个点不是割点,那么,去掉该点后不连通的有序点对就为 : ...

  7. 【SDOI 2010】 魔法猪学院

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1975 [算法] A*求k短路 [代码] #include<bits/stdc+ ...

  8. 78.员工个人信息保镖页面 Extjs 页面

    1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" ...

  9. simpleOS 1.0

    做了一个so simple的OS,本不好意思多说的....不过还是说下吧. 首先,买不起开发板的我没有办完完成一件事,那就是保存任务上下文,因为这个过程实际上是将寄存器的值存放到任务堆栈中去的. 而要 ...

  10. Cracking the Coding Interview 6.5

    There is a building of 100 floors. If an egg drops from the Nth floor or above, it will break. If it ...