Metrics
0
Watch 17 Star 75 Fork 17

Jeffrey-Wang / layui-excelJavaScriptApache-2.0

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
基于 layui、xlsx.js 封装的 excel 导出小插件 spread retract

Clone or download
index.html 7.22 KB
Copy Edit Web IDE Raw Blame History
<!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.layui.excel.exportExcel() 的方式调用父级页面函数以避免这个问题(父页面需要先加载插件)</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="https://fly.layui.com/jie/46036/">社区原帖</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>
<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>
<button type="button" class="layui-btn layui-btn-primary" onclick="groupAdd()">加群交流</button>
</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>

Comment ( 0 )

You need to Sign in for post a comment

Help Search