一、为什么页眉页脚配置总让人头疼作为开发者你可能遇到过这些场景需要导出带页码的财务报表但P写在哪里才能生效想在首页显示特殊标题却发现所有页面都一样设置了字体颜色结果整行文字都变了色页眉页脚看似简单但占位符的组合规则、优先级、样式作用域稍不注意就会踩坑。本文帮你一次性理清。二、核心概念三层结构SpreadJS 的页眉页脚配置遵循 位置 → 类型 → 内容 的三层结构位置层left | center | right ↓ 类型层header | footer ↓ 内容层文本 占位符基础示例sheet.printInfo().pageHeaderFooter({ normal: { header: { center: 第 P 页 } } })这段代码里normal表示在所有页面上应用这个设置header代表页眉对应的页脚是footercenter表示中间位置还有left和right最关键的是P它代表当前页码我们叫它占位符——打印时会自动替换成实际的页码。三、占位符速查表3.1 数据占位符P当前页码第1页打印时显示1N总页数共10页就显示10D当前日期2026/1/1T当前时间15:30:26G图像需配合leftImage/centerImage/rightImage使用F工作簿名称等于workbook的name属性A工作表名称当前打印的sheet名称3.2 样式占位符除了数据页眉页脚的文字样式也能控制B加粗I斜体2020号字体数字可自定义宋体设置字体为宋体注意英文双引号KFF0000红色K代表颜色后面跟RGB十六进制S删除线U下划线四、样式作用域规则样式占位符有个特点前面的设置会影响后面的文字。举个例子26西宋体安K0000FF葡U萄B城I你S好这段文本的效果是26让后面所有文字变成26号字宋体从安字开始应用宋体K0000FF从葡字开始变成蓝色后面的样式依次类推最终效果如下五、首页与奇偶页设置5.1 三种模式SpreadJS和Excel一样支持三种页眉页脚模式Normal所有页面统一设置默认First仅第一页特殊设置Odd/Even奇数页和偶数页分别设置5.2 启用特殊模式要启用首页不同和奇偶页需要先开启开关// 首页不同 sheet.printInfo().differentFirstPage(true) // 奇偶页不同 sheet.printInfo().differentOddAndEvenPages(true)5.3 优先级规则这三种模式有优先级First优先级最高首页永远用首页设置Odd/Even优先级次之Normal优先级最低兜底用5.4 完整示例如果想同时设置首页、奇数页、偶数页可以这样写// 先开启两个开关 sheet.printInfo().differentFirstPage(true) sheet.printInfo().differentOddAndEvenPages(true) // 再分别设置 sheet.printInfo().pageHeaderFooter({ first: { header: { center: 30合同封面, // 封面页大号字体 } }, odd: { header: { left: 工作表A, center: 第P/N页 } }, even: { header: { center: 偶数页 第P/N页, right: 导出日期D } }, })六、总结页眉页脚看着简单但真要灵活运用起来还是有不少细节需要注意占位符是核心P、N、D这些占位符是动态内容的关键记不住的话建议收藏备用。样式有作用范围样式占位符从设置位置开始一直影响到后面的文字这点和CSS的继承有点像。开关要先开想用首页或奇偶页不同别忘了先调用differentFirstPage(true)或differentOddAndEvenPages(true)。优先级别搞反首页 奇偶页 普通页这个顺序决定了最终显示哪个设置。调试小技巧设置完之后可以用SpreadJS的打印预览功能先看看效果避免直接导出PDF后才发现问题。掌握这些要点后无论是做报表导出、合同打印还是其他需要页眉页脚的场景你都能轻松应对了。