Layui table.exportExcel 不支持直接添加标题,需用 SheetJS 手动构造:先写合并标题行,再追加表头和数据,注意全量导出需后端配合、日期格式处理及中文文件名编码。
layui table exportExcel 方法不支持直接加标题
原生 table.exportexcel 只导出表格数据,顶部空行都得手动塞——它压根没提供「插入标题行」的参数或钩子。你看到的 excel 顶部空白,不是漏了,是设计如此。
- 导出本质是把
table.cache数据转 CSV 或 SheetJS 的sheet,不经过渲染层,DOM 上写的标题对它完全不可见 - 如果你在表格上方用
<h2>销售汇总报表</h2>,exportExcel 不会自动把它抓进去 - 想加标题,必须绕过默认导出,自己构造 sheet 数据
用 sheetjs(xlsx)手动构造带标题的 Excel
这是最可控、兼容性最好的路:拦截导出动作,用 xlsx 库新建 workbook,先写标题行,再追加表格数据。Layui 官方示例里也推荐这种方式替代原生导出。
- 确保已引入
https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js - 用
table.cache['your-id']拿到当前页数据(注意:不是全部数据,如需全量要配合table.config中的url和分页逻辑) - 标题行建议用单单元格合并(
{v: '大标题', t: 's'}+!merges),不然容易错位 - 列宽需手动设
!cols,否则 Excel 默认窄,标题文字被截断
const data = table.cache['demo']; // 假设表格 id 是 demo
const ws = XLSX.utils.aoa_to_sheet([
['销售汇总报表'], // 标题行
[], // 空行(可选)
['序号', '姓名', '销售额', '日期'] // 表头
]);
// 合并第一行(A1:D1)
ws['!merges'] = [{s:{r:0,c:0},e:{r:0,c:3}}];
// 写入数据行
data.forEach((item, i) => {
const row = [i+1, item.name, item.amount, item.date];
XLSX.utils.sheet_add_aoa(ws, [row], {origin: -1});
});
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, '数据表');
XLSX.writeFile(wb, '销售汇总报表.xlsx');
导出全量数据时标题位置容易错乱
如果表格启用了分页,而你想导出全部数据(非当前页),直接用 table.cache 就会漏数据——它只存当前页。这时标题写在第 0 行,数据从第 3 行开始追加,看似没问题,但实际全量数据得走后台请求,返回后再拼到 sheet 里。
- 不要依赖前端缓存做「全量导出」,
table.cache是分页快照,不是数据源 - 后端返回全量 JSON 后,仍要按同样逻辑:先写标题行 → 再写表头 → 最后循环写数据
- 注意时间格式字段(如
date),xlsx 默认当数字处理,需用cell.z = 'yyyy-mm-dd'或转成字符串再写,否则 Excel 显示为 44205 这类序列值
样式和冻结首行只能靠 xlsx 高级写法
纯文本标题能加,但加粗、居中、背景色这些,exportExcel 彻底不支持;就连「冻结首行」这种基础体验,也得靠 ws['!freeze'] = {x:0, y:3} 手动配(y=3 表示冻结前 3 行:标题、空行、表头)。
- 加粗标题:给单元格加
s: {font: {bold: true}},但要注意aoa_to_sheet不解析 style,得用sheet_add_aoa+cell.v/cell.s分别赋值 - 居中:
s: {alignment: {horizontal: 'center'}},合并单元格后才生效 - 导出文件名含中文?用
XLSX.writeFile(wb, encodeURI('报表.xlsx'))防止下载乱码


















