layui的table.exportFile()无法设置Excel字体样式,因其底层仅支持无样式导出;必须引入xlsx.full.min.js,手动生成worksheet并逐单元格配置cell.s.font才能实现字体控制。
table.exportfile() 无法设置导出 excel 的字体——它只导出纯数据,所有样式(包括字体大小、颜色、粗细)都会被忽略。必须绕过这个方法,用 xlsx 原生 api 手动生成带样式的 .xlsx 文件。
为什么直接调用 exportFile 不生效
layui 的 table.exportFile() 底层调用的是 SheetJS 的简易导出路径,仅支持 csv 或无样式的 xlsx,不暴露 cell.s.font 控制权。你传的 cols 和 data 只影响内容,font、color、sz 等字段会被完全丢弃。
- 即使你在列配置里写
cellStyle: () => ({ css: { 'font-size': '12px' } }),也只作用于页面表格,不影响导出文件 - 导出后打开 Excel,所有文字都是默认 11 号、常规、黑色——这是 Excel 自动渲染结果,不是 layui 设置的
- 若引入了 layui 自带的
xlsx.min.js(精简版),它根本不含样式支持模块,s属性写上去也没效果
手动生成 XLSX 并设置字体的最小可行步骤
核心是用 XLSX.utils.aoa_to_sheet() 或 json_to_sheet() 构建 worksheet,再逐个单元格赋值 cell.s.font。
诊断并修复涉及公式、命名范围、Power Query 刷新、数据透视表、VBA/宏保存等问题的 Microsoft Excel XLSX 工作簿
- 必须引入完整版:
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>(不能用 layui 自带的精简版) - 表头和数据行要分开处理:第 1 行(
A1,B1…)设表头字体;从第 2 行起(A2,B2…)设数据字体 - 字体大小用
sz(单位为磅),加粗用bold: true,颜色用color: { rgb: "FF0000" }(6位大写,无#) - 示例:让“金额”列(假设是第 3 列 → Excel 列为
C)所有数据单元格字体为 12 号、加粗、红色:for (let i = 0; i < data.length; i++) { const addr = `C${i + 2}`; if (ws[addr]) { ws[addr].s = { font: { sz: 12, bold: true, color: { rgb: "FF0000" } } }; } }
容易漏掉的关键细节
少一个环节,字体就不会显示:
-
bookType: "xlsx"必须显式指定——选"csv"或"xls"会彻底丢弃s样式 -
ws[cellRef].s必须直接赋值,不能只改ws[cellRef].v或ws[cellRef].t - 中文表头易被截断?得手动设
ws['!cols'] = [{ wpx: 120 }, { wpx: 100 }, ...],否则字体再大也看不见全字 - 导出前必须调用
XLSX.write(wb, { type: "binary", bookType: "xlsx" })—— 用type: "array"或"buffer"会导致样式丢失
真正麻烦的不是写几行 font 配置,而是整个流程已脱离 layui 封装:数据提取、sheet 构建、单元格遍历、样式注入、二进制转换、Blob 下载……每一步都要自己兜底,缺一不可。

















