layui table.exportfile() 默认不支持表头背景色,需绕过封装用 sheetjs 手动创建 workbook,设置 header 单元格 fill 样式(rgb 6位大写),并用 filesaver.js 导出 xlsx。
layui table.exportfile() 默认不支持表头背景色
layui 的 exportfile() 方法底层调用的是 sheetjs(xlsx)生成 excel,但只暴露了字段名(cols)和数据(data),不提供单元格样式控制。表头颜色、字体、边框等完全由 sheetjs 默认行为决定——也就是纯白底 + 黑字,无法通过 layui 原生参数修改。
必须绕过 exportFile(),手动生成 workbook
想改表头背景色,就得跳过 layui 封装,直接用 XLSX 对象构造工作簿。关键步骤是:把 layui 表格的 cols 和 data 提出来,手动创建 sheet,再给第一行(表头)加 fill 样式。
- 先用
table.config["your-table-id"].cols[0]拿到列配置,提取field和title - 用
XLSX.utils.aoa_to_sheet([headerRow, ...dataRows])创建 sheet,其中headerRow是标题数组 - 对
sheet["A1"]到sheet["Z1"](按列数)逐个设置s(style)属性,填入{fill: {fgColor: {rgb: "5C85FB"}}} - 最后用
XLSX.write(wb, {bookType: "xlsx", type: "binary"})导出
样式写法有兼容陷阱:仅支持 .xlsx,且 fill 不生效于 .csv
SheetJS 的单元格样式(s)只在 bookType: "xlsx" 下有效;选 csv 或 xls 会直接丢弃所有样式。另外,fill 必须用 fgColor.rgb 十六进制(6位,不带 #),写成 "#5C85FB" 或 "5C85FB00" 都会失效。
- RGB 值必须是大写、无符号、6位(如
"FF6B6B"),小写或带 # 会被忽略 - 字体色、粗细等其他样式需额外加
font字段,但背景色是最容易漏掉的硬性依赖 - 导出前务必检查浏览器是否支持
Uint8Array和Blob,IE11 需补 polyfill
别忘了重写下载逻辑:不能用 layui 的 downloadUrl
layui 的 exportFile() 最终走的是 location.href = downloadUrl,但你手动生成的是二进制流,必须用 saveAs(new Blob([s2ab(...)], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}), "xxx.xlsx")。
- 需要引入
FileSaver.js(或用原生URL.createObjectURL) -
s2ab辅助函数不能少:把字符串转为 ArrayBuffer,否则XLSX.write输出乱码 - 列宽不会自动适应,如需美观,得手动设
!cols属性,否则中文表头常被截断
样式控制不在 layui 表格 API 范围内,所有颜色、边框、对齐都得在 SheetJS 层自己补全——最简路径是只动 fill,但一旦开始改样式,就等于接管了整个 Excel 生成链。










