Layui table.exportFile() 不支持像素级列宽控制,需手动调用 SheetJS 的 xlsx.write() 并设置 !cols 中的 wch 值(字符宽度),按约 1px≈0.075 字符换算,如 120px 设为 wch: 15。
layui table.exportFile() 默认不支持像素级列宽控制
直接调用 table.exportfile() 生成的 excel 文件,列宽由内容自动撑开,无法通过 layui 原生 api 设置像素值(如 120px)。这是因为导出底层依赖的是 sheetjs(xlsx.js),而 layui 封装时未暴露列宽配置项,所有列宽最终由 excel 自动计算——哪怕你用 css 设置了 width: 150px 在表格 dom 上,也完全不影响导出结果。
必须改用 xlsx.write() 手动构造工作表
要精确控制列宽(单位为 Excel 的「字符宽度」,非像素),得绕过 table.exportFile(),自己提取数据、创建 worksheet,并设置 !cols 属性。注意:Excel 中列宽单位不是像素,而是「以默认字体下 0 字符宽度为基准的字符数」;大致可按 1px ≈ 0.075 字符宽度 换算(如 120px → 约 9 字符宽度),但实际受字体影响,需微调。
- 先用
table.cache['your-table-id']获取当前表格全部行数据(含分页过滤后结果) - 用
xlsx.utils.json_to_sheet(data)创建 sheet - 手动设置
sheet['!cols'] = [{ wch: 9 }, { wch: 18 }, ...],数组长度必须等于列数,顺序一一对应 - 调用
xlsx.write(workbook, { bookType: 'xlsx', type: 'blob' })导出
列宽单位换算和常见踩坑点
很多人卡在「为什么设了 wch: 120 列还是没变宽」——因为 wch 是字符宽度,不是像素。Excel 中 1 字符宽度 ≈ 7–8 像素(取决于字体和缩放),所以 120px 实际应设为 wch: 15 左右(120 ÷ 8 ≈ 15)。另外:
-
!cols数组索引必须从左到右严格对应表格列顺序,漏一个或错位会导致整列偏移 - 如果用了
templet或toolbar列,这些列不会出现在table.cache数据里,导出时需自行剔除或对齐索引 - Layui 2.8+ 内置的 xlsx 版本较老(约 0.18.x),不支持
width用像素单位,只认wch(字符宽)和width(粗略像素映射,但兼容性差,弃用) - 中文内容多的列建议设大些(如
wch: 20),否则会显示「###」
导出按钮绑定示例(精简可直接用)
假设表格 ID 是 userTable,列顺序为「用户名、邮箱、状态」,想设宽为 120px / 180px / 80px:
// 换算:120px→~15, 180px→~22, 80px→~10
const data = layui.table.cache['userTable'];
const ws = XLSX.utils.json_to_sheet(data);
ws['!cols'] = [
{ wch: 15 },
{ wch: 22 },
{ wch: 10 }
];
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, '用户列表');
XLSX.writeFile(wb, '用户列表.xlsx');
这段代码必须确保页面已加载 XLSX 全局对象(Layui 2.8+ 自带,无需额外引入);若用的是 Layui 2.7 或更早版本,需手动引入 xlsx.full.min.js。
最易被忽略的是:列宽设置必须在 json_to_sheet 之后、writeFile 之前,且 !cols 是 worksheet 对象的自有属性,不能写在 workbook 或其他地方。











