📊 前端 - 数据导出
ThinkAdmin 提供完善的数据导出功能,基于 layui.excel 工具实现 Excel 文件的导出,支持前端直接生成和下载。
🚀 主要功能
- Excel 导出: 支持 Excel 文件的前端导出
- JSON 数据: 仅需返回 JSON 内容,无需服务器生成文件
- 前端生成: 由前端 JS 生成并下载到本地
- 性能优化: 减少服务器负载,提升导出性能
- 灵活配置: 支持多种导出配置和格式
- 用户友好: 提供友好的导出界面和操作
📋 技术特点
基于 layui.excel
- 官方工具: 基于 layui.excel 官方工具
- 文档支持: 详细文档参考 http://excel.wj2015.com
- 功能完整: 支持完整的 Excel 导出功能
- 兼容性好: 与 LayUI 框架完美兼容
前端处理
- 无需服务器: 不需要服务器生成 Excel 文件
- JSON 数据: 仅需返回 JSON 格式的数据
- 前端生成: 由前端 JavaScript 生成文件
- 本地下载: 直接下载到用户本地
⚙️ 使用场景
数据报表
- 业务数据: 导出业务相关的数据报表
- 统计信息: 导出统计和分析数据
- 用户数据: 导出用户相关的数据信息
- 财务数据: 导出财务和交易数据
系统管理
- 日志导出: 导出系统操作日志
- 配置导出: 导出系统配置信息
- 备份数据: 导出重要数据备份
- 审计数据: 导出审计和合规数据
业务应用
- 订单导出: 导出订单和交易数据
- 用户导出: 导出用户信息和数据
- 内容导出: 导出内容管理数据
- 营销数据: 导出营销活动数据
🔧 技术实现
前端处理流程
- 数据获取: 通过 AJAX 获取 JSON 数据
- 数据转换: 将 JSON 数据转换为 Excel 格式
- 样式设置: 设置表头和内容的样式
- 文件生成: 生成 Excel 文件并下载
样式配置
- 表头样式: 设置表头的字体、颜色、对齐方式
- 内容样式: 设置表格内容的样式
- 行高列宽: 自定义行高和列宽
- 交替行色: 支持交替行颜色显示
<fieldset>
<legend>条件搜索</legend>
<form class="layui-form layui-form-pane form-search" action="{:sysuri()}" onsubmit="return false" method="get" autocomplete="off">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">操作账号</label>
<div class="layui-input-inline">
<select name='username' lay-search class="layui-select">
<option value=''>-- 全部账号 --</option>
{foreach $users as $user}{if $user eq input('get.username')}
<option selected value="{$user}">{$user}</option>
{else}
<option value="{$user}">{$user}</option>
{/if}{/foreach}
</select>
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">操作节点</label>
<label class="layui-input-inline">
<input name="node" value="{$get.node|default=''}" placeholder="请输入操作内容" class="layui-input">
</label>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">操作行为</label>
<div class="layui-input-inline">
<select name="action" lay-search class="layui-select">
<option value=''>-- 全部行为 --</option>
{foreach $actions as $action}{if $action eq input('get.action')}
<option selected value="{$action}">{$action}</option>
{else}
<option value="{$action}">{$action}</option>
{/if}{/foreach}
</select>
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">操作描述</label>
<label class="layui-input-inline">
<input name="content" value="{$get.content|default=''}" placeholder="请输入操作内容" class="layui-input">
</label>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">访问地址</label>
<label class="layui-input-inline">
<input name="geoip" value="{$get.geoip|default=''}" placeholder="请输入访问地址" class="layui-input">
</label>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">操作时间</label>
<label class="layui-input-inline">
<input data-date-range name="create_at" value="{$get.create_at|default=''}" placeholder="请选择操作时间" class="layui-input">
</label>
</div>
<div class="layui-form-item layui-inline">
<button type="submit" class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜 索</button>
<button type="button" data-form-export="{:url('index')}?type={$type|default=''}" class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-export"></i> 导 出
</button>
</div>
</form>
</fieldset>
<script>
require(['excel'], function (excel) {
excel.bind(function (data) {
// 设置表格内容
data.forEach(function (item, index) {
data[index] = [item.id, item.username, item.node, item.geoip, item.geoisp, item.action, item.content, item.create_at];
});
// 设置表头内容
data.unshift(['ID', '操作账号', '访问节点', '访问IP地址', '访问地理区域', '访问操作', '操作内容', '操作时间']);
// 可选,自动计算列序号
var lastCol = layui.excel.numToTitle((function (count, idx) {
for (idx in data[0]) count++;
return count;
})(0));
// 可选,设置表头样式
layui.excel.setExportCellStyle(data, 'A1:' + lastCol + '1', {
s: {
font: {sz: 14, bold: true, color: {rgb: "FFFFFF"}, shadow: true},
fill: {bgColor: {indexed: 64}, fgColor: {rgb: "5FB878"}},
alignment: {vertical: 'center', horizontal: 'center'}
}
});
// 可选,设置内容样式
var style1 = {
fill: {bgColor: {indexed: 64}, fgColor: {rgb: "EAEAEA"}},
alignment: {vertical: 'center', horizontal: 'center'}
}, style2 = {
fill: {bgColor: {indexed: 64}, fgColor: {rgb: "FFFFFF"}},
alignment: {vertical: 'center', horizontal: 'center'}
};
layui.excel.setExportCellStyle(data, 'A2:' + lastCol + data.length, {
s: style1
}, function (rawCell, newCell, row, config, currentRow, currentCol, fieldKey) {
/* 判断并转换单元格数据为对象,以便初始化样式 */
typeof rawCell !== 'object' && (rawCell = {v: rawCell});
rawCell.s = Object.assign({}, style2, rawCell.s || {});
return (currentRow % 2 === 0) ? newCell : rawCell;
});
// 可选,设置表格行宽高,需要设置最后的行或列宽高,否则部分不生效 ???
var rowsC = {1: 40}, colsC = {A: 60, B: 100};
rowsC[data.length] = 33, colsC[lastCol] = 160;
this.options.extend = {
'!rows': layui.excel.makeRowConfig(rowsC, 33), // 设置每行高度,默认 33
'!cols': layui.excel.makeColConfig(colsC, 160) // 设置每行宽度,默认 160
};
// 其他更多样式,可以配置 this.options.extend 参数,每次执行 bind 会被重置
// 在线文档:http://excel.wj2015.com/_book/docs/%E5%87%BD%E6%95%B0%E5%88%97%E8%A1%A8/%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E7%9B%B8%E5%85%B3%E5%87%BD%E6%95%B0.html
return data;
}, '操作日志');
});
</script>