如何设置Layui表格导出Excel单元格背景色及加粗字体？

本文共计733个文字，预计阅读时间需要3分钟。

相关专题：

layui table.exportFile() 无法直接设背景色和加粗

直接调用 table.exportfile() 不支持单元格背景色、字体加粗等样式——它底层只传 data 和 cols 给 sheetjs，不透出 s（style）字段。你看到的 excel 是纯白底黑字，改不了。

必须手动生成 workbook 并设置 cell.s.fill + cell.s.font

要用 XLSX.utils.json_to_sheet() 或 XLSX.utils.aoa_to_sheet() 创建 sheet，再逐个给单元格（包括表头和数据单元格）赋值 s 属性：

• 表头背景色：对 A1、B1… 等第一行单元格设 s: { fill: { fgColor: { rgb: "5C85FB" } } }，注意 rgb 必须是大写、6位、无 #
• 加粗字体：同一单元格加 font: { bold: true }，可同时存在 fill 和 font
• 数据行加粗：比如金额列（第3列）所有非空单元格都要设 bold: true，需遍历 R = 1 到 data.length，用 XLSX.utils.encode_cell({r: R, c: 2}) 定位
• 导出类型必须是 xlsx：bookType: "xlsx"，选 csv 或 xls 会丢弃全部样式

别漏掉 s2ab 和 FileSaver.js 这两个硬依赖

XLSX.write(wb, {type: "binary"}) 输出的是字符串，浏览器无法直接下载为 Excel；必须转成 ArrayBuffer 再包进 Blob：

• 缺 s2ab() 辅助函数会导致文件打不开或乱码，标准写法是：

  function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; }

• 下载必须用 saveAs(new Blob([s2ab(...)], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}), "xxx.xlsx")，不能走 location.href
• IE11 需提前引入 FileSaver.js 或 polyfill Uint8Array 和 Blob

列宽不自动适配，中文表头容易被截断

SheetJS 默认列宽极窄，中文标题常显示为“...”。必须手动设 !cols：

• 例如：ws['!cols'] = [{wpx: 100}, {wpx: 140}, {wpx: 120}, {wpx: 160}]，顺序对应列
• 数值单位是像素（wpx），不是字符数；wch（字符宽）在中文下不可靠，慎用
• 如果列数动态变化，得先根据 cols[0] 长度生成等长数组，再填入预估宽度

真正麻烦的不是写几行样式，而是整个导出链路已脱离 layui 封装——从数据提取、sheet 构建、样式注入到二进制下载，每一步都得自己兜底，少一个环节就导出失败或样式丢失。