📊 数据导出

<form class="layui-form layui-form-pane form-search" action="{:sysuri()}" method="get">
 <!-- 搜索表单字段 -->
 <div class="layui-form-item layui-inline">
 <label class="layui-form-label">关键词</label>
 <div class="layui-input-inline">
 <input name="keyword" value="{$get.keyword|default=''}" placeholder="请输入关键词" class="layui-input">
 </div>
 </div>

 <div class="layui-form-item layui-inline">
 <button type="submit" class="layui-btn layui-btn-primary">
 <i class="layui-icon">&#xe615;</i> 搜 索
 </button>
 <!-- 导出按钮 -->
 <button type="button"
 data-form-export="{:url('index')}"
 class="layui-btn layui-btn-primary">
 <i class="layui-icon layui-icon-export"></i> 导 出
 </button>
 </div>
</form>

2. JavaScript 代码

<script>
require(['excel'], function (excel) {
 // 绑定导出处理函数
 excel.bind(function (data) {
 // data 是从服务器获取的 JSON 数据数组

 // 1. 转换数据格式:将对象数组转换为二维数组
 data.forEach(function (item, index) {
 data[index] = [
 item.id, // ID
 item.username, // 用户名
 item.nickname, // 昵称
 item.phone, // 手机号
 item.email, // 邮箱
 item.status, // 状态
 item.create_at // 创建时间
 ];
 });

 // 2. 添加表头(必须在第一行)
 data.unshift([
 'ID', 
 '用户名', 
 '昵称', 
 '手机号', 
 '邮箱', 
 '状态', 
 '创建时间'
 ]);

 // 3. 应用样式(可选)
 return this.withStyle(data, {
 A: 60, // A列宽度
 B: 100, // B列宽度
 C: 120, // C列宽度
 D: 120, // D列宽度
 E: 150, // E列宽度
 F: 80, // F列宽度
 G: 170 // G列宽度
 });

 }, '用户数据_' + layui.util.toDateString(Date.now(), '_yyyyMMdd_HHmmss'));
});
</script>

3. 后端代码

后端需要返回 JSON 格式的数据:

<?php
declare(strict_types=1);

namespace app\admin\controller;

use think\admin\Controller;
use think\admin\model\SystemUser;

/**
 * 用户管理
 * @class User
 * @package app\admin\controller
 */
class User extends Controller
{
 /**
 * 用户列表(支持导出)
 * @auth true
 */
 public function index()
 {
 // 如果是导出请求,返回 JSON 数据
 if ($this->request->get('output') === 'json') {
 $query = SystemUser::mQuery();
 $query->where(['is_deleted' => 0]);
 $query->like('username,nickname,phone,email');
 $query->equal('status');
 $query->dateBetween('create_at');

 // 导出时不分页,获取所有数据
 $list = $query->order('id desc')->page(true, false);

 $this->success('success', [
 'list' => $list,
 'page' => ['current' => 1, 'pages' => 1, 'total' => count($list)]
 ]);
 }

 // 正常列表显示
 SystemUser::mQuery()->layTable(function () {
 $this->title = '用户管理';
 }, function ($query) {
 $query->where(['is_deleted' => 0]);
 $query->like('username,nickname,phone,email');
 $query->equal('status');
 $query->dateBetween('create_at');
 });
 }
}

方式二:使用 Excel.push 方法(自定义导出)

适用于需要自定义导出逻辑的场景。

<script>
require(['excel'], function (excel) {
 // 自定义导出按钮
 $('#customExportBtn').on('click', function() {
 excel.bind(function (data) {
 // 处理数据
 data.forEach(function (item, index) {
 data[index] = [item.id, item.name, item.value];
 });
 data.unshift(['ID', '名称', '值']);

 // 应用样式
 return this.withStyle(data, {A: 60, B: 120, C: 100});
 }, '自定义导出_' + layui.util.toDateString(Date.now(), '_yyyyMMdd_HHmmss'));

 // 触发导出(需要先绑定 data-form-export 的按钮)
 $('[data-form-export]').trigger('click');
 });
});
</script>

📋 样式设置

使用 withStyle 方法(推荐)

withStyle 是 Excel 插件提供的快捷方法,可以快速设置表格样式。

// 基本用法
return this.withStyle(data, {
 A: 60, // A列宽度
 B: 100, // B列宽度
 C: 120 // C列宽度
});

// 指定默认宽度和高度
return this.withStyle(data, {
 A: 60,
 B: 100
}, 99, // 默认列宽
28); // 默认行高

手动设置样式

如果需要更精细的样式控制,可以手动设置:

require(['excel'], function (excel) {
 excel.bind(function (data) {
 // 转换数据
 data.forEach(function (item, index) {
 data[index] = [item.id, item.username, item.create_at];
 });
 data.unshift(['ID', '用户名', '创建时间']);

 // 计算最后一列
 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, // 阴影
 name: '微软雅黑' // 字体名称
 },
 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'}
 };
 var 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 || {});
 // 偶数行使用 style1,奇数行使用 style2
 return (currentRow % 2 === 0) ? newCell : rawCell;
 });

 // 设置行高和列宽
 var rowsC = {1: 40}; // 第1行(表头)高度为40
 var colsC = {A: 60, B: 100, C: 170}; // 列宽设置
 rowsC[data.length] = 33; // 最后一行高度为33
 colsC[lastCol] = 160; // 最后一列宽度为160

 this.options.extend = {
 '!rows': layui.excel.makeRowConfig(rowsC, 33), // 默认行高33
 '!cols': layui.excel.makeRowConfig(colsC, 160) // 默认列宽160
 };

 return data;
 }, '导出文件名');
});

📋 完整示例

参考系统日志模块的实现,这是一个完整的导出示例。

1. 前端HTML代码

{extend name="admin@public/container" /}

{block name="content"}
<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}
 <option value="{$user}" {if $user eq input('get.username')}selected{/if}>{$user}</option>
 {/foreach}
 </select>
 </div>
 </div>

 <div class="layui-form-item layui-inline">
 <label class="layui-form-label">操作节点</label>
 <div class="layui-input-inline">
 <input name="node" value="{$get.node|default=''}" placeholder="请输入操作节点" class="layui-input">
 </div>
 </div>

 <div class="layui-form-item layui-inline">
 <label class="layui-form-label">操作时间</label>
 <div class="layui-input-inline">
 <input data-date-range name="create_at" value="{$get.create_at|default=''}" placeholder="请选择操作时间" class="layui-input">
 </div>
 </div>

 <div class="layui-form-item layui-inline">
 <button type="submit" class="layui-btn layui-btn-primary">
 <i class="layui-icon">&#xe615;</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>

<!-- 数据表格 -->
<table id="OplogTable" data-url="{:request()->url()}" data-target-search="form.form-search"></table>
{/block}

{block name='script'}
<script>
$(function () {
 // 初始化表格
 $('#OplogTable').layTable({
 even: true, 
 height: 'full',
 sort: {field: 'id', type: 'desc'},
 cols: [[
 {checkbox: true},
 {field: 'id', title: 'ID', width: 80, sort: true, align: 'center'},
 {field: 'username', title: '操作账号', minWidth: 100, sort: true},
 {field: 'node', title: '操作节点', minWidth: 120},
 {field: 'action', title: '操作行为', minWidth: 120},
 {field: 'content', title: '操作内容', minWidth: 150},
 {field: 'geoip', title: '访问地址', minWidth: 100},
 {field: 'geoisp', title: '网络服务商', minWidth: 100},
 {field: 'create_at', title: '创建时间', minWidth: 170, align: 'center', sort: true}
 ]]
 });
});

// Excel 导出配置
require(['excel'], function (excel) {
 excel.bind(function (data) {
 // 1. 转换数据格式:将对象数组转换为二维数组
 data.forEach(function (item, index) {
 data[index] = [
 item.id, // ID
 item.username, // 操作账号
 item.node, // 操作节点
 item.geoip, // 访问地址
 item.geoisp, // 网络服务商
 item.action, // 操作行为
 item.content, // 操作内容
 item.create_at // 创建时间
 ];
 });

 // 2. 添加表头
 data.unshift([
 'ID', 
 '操作账号', 
 '操作节点', 
 '访问地址', 
 '网络服务商', 
 '操作行为', 
 '操作内容', 
 '创建时间'
 ]);

 // 3. 应用样式(使用 withStyle 快捷方法)
 return this.withStyle(data, {
 A: 60, // ID列
 B: 80, // 操作账号列
 C: 99, // 操作节点列
 D: 120, // 访问地址列
 E: 120, // 网络服务商列
 F: 100, // 操作行为列
 G: 120, // 操作内容列
 H: 170 // 创建时间列
 });

 }, '操作日志_' + layui.util.toDateString(Date.now(), '_yyyyMMdd_HHmmss'));
});
</script>
{/block}

2. 后端PHP代码

<?php
declare(strict_types=1);

namespace app\admin\controller;

use think\admin\Controller;
use think\admin\helper\QueryHelper;
use think\admin\model\SystemOplog;

/**
 * 系统日志管理
 * @class Oplog
 * @package app\admin\controller
 */
class Oplog extends Controller
{
 /**
 * 系统日志管理
 * @auth true
 * @menu true
 */
 public function index()
 {
 // 如果是导出请求,返回 JSON 数据
 if ($this->request->get('output') === 'json') {
 $query = SystemOplog::mQuery();
 $query->dateBetween('create_at');
 $query->equal('username,action');
 $query->like('content,geoip,node');

 // 导出时不分页,获取所有数据
 $list = $query->order('id desc')->page(true, false);

 // 处理IP地址信息
 $region = new \Ip2Region();
 foreach ($list as &$vo) {
 try {
 $vo['geoisp'] = $region->simple($vo['geoip']);
 } catch (\Exception $exception) {
 $vo['geoisp'] = '';
 }
 }

 $this->success('success', [
 'list' => $list,
 'page' => ['current' => 1, 'pages' => 1, 'total' => count($list)]
 ]);
 }

 // 正常列表显示
 SystemOplog::mQuery()->layTable(function () {
 $this->title = '系统日志管理';
 $columns = SystemOplog::mk()->column('action,username', 'id');
 $this->users = array_unique(array_column($columns, 'username'));
 $this->actions = array_unique(array_column($columns, 'action'));
 }, static function (QueryHelper $query) {
 $query->dateBetween('create_at');
 $query->equal('username,action');
 $query->like('content,geoip,node');
 });
 }
}

📋 数据格式说明

后端返回格式

后端需要返回以下格式的 JSON 数据:

{
 "code": 1,
 "info": "success",
 "data": {
 "list": [
 {
 "id": 1,
 "username": "admin",
 "node": "/admin/user/index",
 "geoip": "127.0.0.1",
 "geoisp": "内网IP",
 "action": "查询",
 "content": "查看用户列表",
 "create_at": "2024年01月01日 12:00:00"
 },
 // ... 更多数据
 ],
 "page": {
 "current": 1,
 "pages": 1,
 "total": 100
 }
 }
}

前端处理流程

自动分页加载: Excel 插件会自动处理分页,通过 output=json&not_cache_limit=1&limit=100&page=1 等参数获取所有数据
数据转换: 将对象数组转换为二维数组格式
添加表头: 在第一行添加表头
样式设置: 应用表格样式
生成文件: 生成 Excel 文件并下载

📋 高级用法

自定义导出文件名

require(['excel'], function (excel) {
 excel.bind(function (data) {
 // 处理数据
 // ...
 return data;
 }, '自定义文件名_' + layui.util.toDateString(Date.now(), '_yyyyMMdd_HHmmss'));
});

数据过滤和处理

require(['excel'], function (excel) {
 excel.bind(function (data) {
 // 过滤数据
 data = data.filter(function(item) {
 return item.status === 1; // 只导出状态为1的数据
 });

 // 转换数据
 data.forEach(function (item, index) {
 // 处理状态值
 var statusText = item.status === 1 ? '正常' : '禁用';

 data[index] = [
 item.id,
 item.username,
 statusText, // 转换后的状态
 item.create_at
 ];
 });

 data.unshift(['ID', '用户名', '状态', '创建时间']);
 return this.withStyle(data, {A: 60, B: 100, C: 80, D: 170});
 }, '用户数据导出');
});

多工作表导出

require(['excel'], function (excel) {
 excel.bind(function (data) {
 // 处理数据
 data.forEach(function (item, index) {
 data[index] = [item.id, item.username, item.create_at];
 });
 data.unshift(['ID', '用户名', '创建时间']);

 // 创建多个工作表
 var sheet1 = data;
 var sheet2 = [['统计', '数量'], ['总数', data.length - 1]];

 // 返回工作表对象
 return {
 '用户列表': sheet1,
 '统计信息': sheet2
 };
 }, '多工作表导出');
});

自定义导出选项

require(['excel'], function (excel) {
 // 设置导出选项
 excel.options = {
 writeOpt: {bookSST: false},
 extend: {
 // 自定义选项
 }
 };

 excel.bind(function (data) {
 // 处理数据
 // ...
 return data;
 }, '导出文件名');
});

📋 注意事项

后端注意事项

返回格式: 必须返回 code: 1 和 data.list 格式的 JSON
分页处理: 导出时会自动分页获取数据,后端需要支持 output=json&limit=100&page=1 参数
数据量: 大数据量导出时,建议后端进行数据限制或分批处理
性能优化: 导出时可以使用缓存或优化查询,提升性能

前端注意事项

数据格式: 确保数据格式正确,表头和数据行数量匹配
样式设置: 样式设置是可选的,但建议设置以提高可读性
文件大小: 大数据量导出可能生成较大的 Excel 文件
浏览器兼容: 确保浏览器支持文件下载功能

最佳实践

数据验证: 导出前验证数据是否有效
进度提示: 大数据量导出时显示进度提示
错误处理: 完善的错误处理机制
权限控制: 使用 auth() 函数控制导出权限

📋 常见问题

Q: 导出时如何包含搜索条件? A: data-form-export 会自动获取表单的搜索条件,并附加到导出 URL 中。

Q: 如何导出当前表格显示的数据? A: 使用 data-form-export 时,会自动使用表单的搜索条件,确保导出的数据与表格显示一致。

Q: 大数据量导出如何处理? A: Excel 插件会自动分页获取数据,但建议后端对导出数据进行限制,避免导出过多数据。

Q: 如何自定义导出列? A: 在 excel.bind 的回调函数中,只处理需要导出的字段即可。

提示: 更多详细用法请参考 layui.excel 官方文档或查看系统日志模块的实际实现。