layui-excel
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>excel导出扩展分享</title>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
	<style>
		.layui-container {
			padding-bottom: 50px;
		}
	</style>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript">
		layui.config({
			base: 'layui_exts/'
		}).extend({
			excel: 'excel'
		});
	</script>
	<!-- IE需要把JS放在上边，否则onclick失效 -->
	<script src="./index.js"></script>
</head>

<body>
	<div class="layui-container">
		<div class="layui-row">
			<div class="layui-col-md11 layui-col-md-offset1">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>excel导出操作演示</legend>
				</fieldset>
				<blockquote class="layui-elem-quote">
					导出数据速度由运行的电脑性能决定，插件基于 xlsx.js 和 FileSaver，只是做了一个简单的封装。<br>
					经本人工作电脑测试，前端导出<b>纯数据 9列10w</b> 的数据量需要
					<b>7秒左右</b>的时间，<b>30W数据占用1.8G，耗时24秒</b>，普通电脑<b>最多能导出50w数据，耗时45秒</b>，文件大小173M，提示内存超限<br><br>

					<b>电脑配置及系统状况：</b><br>
					CPU(占用24%)：Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz <br>
					内存(占用73%)： 8.0 GB DDR3,Speed: 1600 MHz <br>
					<b>数据量测试：</b><br>
					在决定使用本插件前，请根据业务实际需求量修改『导出数据测试样例』或者『导入样例』进行浏览器压力测试，满足需求再使用本插件。<br>
					PS：效率和内存占用的问题我目前也没有好的解决方案，因为文件生成逻辑在XLSX.JS那边 <br>
					<b>非Layui框架支持：</b><br>
					通过全局变量 LAY_EXCEL 调用函数，具体可见demo，<a href="demos/noLayui/index.html">点此进入</a>

					<p style="color: #f00;margin-top: 20px;">注： iframe 遇到插件冲突的最终解决方案是使用 parent.LAY_EXCEL.exportExcel()
						的方式调用父级页面函数以避免这个问题（父页面需要先加载插件，如果没有 iframe 新建一个子 iframe 并调用其 LAY_EXCEL 避免冲突也可以）</p>
				</blockquote>
				<div class="layui-form">
					<div class="layui-form-item">
						<div class="layui-form-label">导出操作</div>
						<div class="layui-form-block">
							<button type="button" class="layui-btn layui-btn-primary"
								onclick="exportDataByUser()">导出数据测试</button>
							<button type="button" class="layui-btn layui-btn-primary"
								onclick="exportApiDemo('./list.json')">导出接口数据</button>
							<button type="button" class="layui-btn layui-btn-primary"
								onclick="exportExtendDemo()">导出复杂表头</button>
							<button type="button" class="layui-btn layui-btn-primary"
								onclick="exportStyleDemo()">批量设置样式</button>
							<!--<button type="button" class="layui-btn layui-btn-primary" onclick="exportBorderDemo()">快速设置边框</button>-->
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-form-label">导入模板</div>
						<div class="layui-form-block">
							<a class="layui-btn layui-btn-primary" href="demos/test_import.xlsx">常规单元格数据</a>
							<a class="layui-btn layui-btn-primary" href="demos/test_merge.xlsx">合并单元格数据</a>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-form-label">导入操作</div>
						<div class="layui-form-block">
							<input type="file" class="layui-btn layui-btn-primary" id="LAY-excel-import-excel"
								multiple="multiple">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-form-label"></div>
						<div class="layui-form-block">
							<p class="help-block" style="color: #f00;">高级浏览器可以在本页面上直接将文件拖入</p>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-form-label">Upload模块</div>
						<div class="layui-form-block">
							<button type="button" class="layui-btn" id="LAY-excel-upload">
								<i class="layui-icon">&#xe67c;</i>上传文档
							</button>
						</div>
					</div>
					<!--<div class="layui-form-item">-->
					<!--<div class="layui-form-label">使用样例</div>-->
					<!--<div class="layui-form-block">-->
					<!--<button type="button" class="layui-btn layui-btn-primary" onclick="demoList()">查看样例列表</button>-->
					<!--</div>-->
					<!--</div>-->
					<div class="layui-form-item">
						<div class="layui-form-label">更新及文档</div>
						<div class="layui-form-block">
							<a class="layui-btn layui-btn-primary" target="_blank"
								href="/_book/">在线文档</a>
							<a class="layui-btn layui-btn-primary" target="_blank"
								href="https://github.com/wangerzi/layui-excel">最新源码·github</a>
							<a class="layui-btn layui-btn-primary" target="_blank"
								href="https://gitee.com/wangerzi/layui-excel">备选源码·码云</a>
							<button type="button" class="layui-btn layui-btn-primary" onclick="groupAdd()">加群交流</button>
							<a class="layui-btn layui-btn-primary" target="_blank"
								href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=zfT5_fv19fn1-428vOOuoqA">邮件反馈</a>
							<a class="layui-btn layui-btn-primary" target="_blank"
								href="https://fly.layui.com/jie/46036/">社区原帖</a>
						</div>
					</div>
					<div id="LAY-excel-demo-list-dom"></div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/html" id="LAY-excel-export-ans">
	{{# layui.each(d.data, function(file_index, item){ }}
		<blockquote class="layui-elem-quote">{{d.files[file_index].name}}</blockquote>
		<div class="layui-tab">
		  <ul class="layui-tab-title">
		  	{{# layui.each(item, function(sheet_name, content) { }}
			    <li>{{sheet_name}}</li>
		  	{{# }); }}
		  </ul>
		  <div class="layui-tab-content">
		  	{{# layui.each(item, function(sheet_name, content) { }}
			    <div class="layui-tab-item">
						<table class="layui-table">
							{{# layui.each(content, function(row_index, value) { }}
                {{# var col_index = 0 }}
								<tr>
									{{# layui.each(value, function(col_key, val) { }}
									<td id="table-export-{{file_index}}-{{sheet_name}}-{{row_index}}-{{col_index++}}">{{val}}</td>
									{{# });}}
								</tr>
							{{# });}}
						</table>
						<pre class="layui-code">{{JSON.stringify(content, null, 2)}}</pre>
					</div>
		  	{{# }); }}
		  </div>
		</div>
	{{# }) }}
</script>
<!-- 加群交流layer模板 -->
<script type="text/html" id="LAY-excel-group-add">
<!-- <fieldset class="layui-elem-field layui-field-title">
	<legend>加群交流</legend>
</fieldset>
--><p style="text-align: center;"><b>群号：</b>555056599，<a href="https://jq.qq.com/?_wv=1027&k=5uMuyRD"
		target="_blank">点我加群</a></p>
<img alt="QQ群二维码" src="https://raw.githubusercontent.com/wangerzi/layui-excel/master/qq_group_qrcode.png"
	style="max-width: 100%;display:block;margin: 0 auto;">
</script>
<!--demo列表模板-->
<script type="text/html" id="LAY-excel-demo-list">
<table class="layui-table">
	<thead>
	<tr>
		<td>样例描述</td>
		<td>样例路径 <b style="color: #f00;">(可点击跳转)</b></td>
		<td>贡献人</td>
	</tr>
	</thead>
	<tbody>
  {{# layui.each(d.list, function(index, value) { }}
	<tr>
		<td>{{value.desc}}</td>
		<td><a href="{{value.href}}" target="_blank">{{value.path}}</a></td>
		<td>{{value.person}}({{value.email}})</td>
	</tr>
	{{# });}}
	</tbody>
</table>
</script>

</html>