登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
开源项目 > 程序开发 > Excel工具包 &&
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
57 Star 388 Fork 112

Jeffrey-Wang / layui-excel

代码 Issues 12 Pull Requests 0 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
克隆/下载
index.html 7.48 KB
一键复制 编辑 原始数据 按行查看 历史
Jeffrey-Wang 提交于 2022-09-06 10:10 . feat: 文档和界面微调
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
<!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>
JavaScript
1
https://gitee.com/wangerzi/layui-excel.git
git@gitee.com:wangerzi/layui-excel.git
wangerzi
layui-excel
layui-excel
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部