layui导出excel复杂表头
众所周知 layui的导出功能很好⽤，但是今天我要给⼤家推荐⼀个更好⽤的
⼤家来到这⾥想必也是因为layui⽆法满⾜【导出Excle复杂表头】的业务需求⽽来，这⾥废话不多说但还是强调⼀点，如果你是⽤的layui服务渲染的表格如：
这种情况个⼈建议移步⾄
⾸先
把⽂解压来到 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 >hidden</td>
<td>a3</td>
</tr>
<tr>
<th>b</th>
<td colspan="2">b1+b2</td>
<td>b3</td>
layui下载</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();
});
</script>
</body>
</html>
运⾏即可
温馨提⽰如果下载的Excle ⽆法打开请解除绑定
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论