浏览器打印页眉页脚的真相：为什么 @page 规则总让你失望
如果你曾试图用CSS的@page规则为网页打印添加一个动态的页眉或页脚，结果多半是令人沮丧的。这并非你的代码有问题，而是浏览器对@page的支持本身就存在硬性限制——它天生就无法实现动态、个性化或包含DOM元素的页眉页脚。
为什么 @page 里的 content 只能用静态字符串或简单计数器
问题的根源在于规范。CSS Paged Media模块对@page中的content属性有着极为严格的规定，它只允许以下几种“贫瘠”的内容：
string()函数：听起来不错，但它依赖一个名为element()的上下文，而这个功能在所有主流浏览器中都尚未实现，基本等于摆设。- 内置计数器：比如
counter(page)（当前页码）和counter(pages)（总页数）。 - 纯文本字符串：例如直接写上
"Report v2.1"。关键点在于，它不会解析HTML、不执行Ja vaScript，也无法读取任何元素属性。
这意味着，那些看似合理的想法，比如通过@page :first { @top-center { content: "Hello " attr(data-title); } }来动态插入页面标题，是行不通的。attr()函数在@page的语境下完全无效。
实际能用的页眉页脚写法（仅限 Chrome / Edge 最新版）
那么，在现实世界中，我们能做些什么呢？目前，只有基于Chromium内核的浏览器（Chrome 120及以上版本、Edge 120及以上版本）对@page的@top、@bottom区域提供了部分支持，但也仅限于非常基础的内容。
@page {
size: A4;
margin: 0;
}
@page :first {
@top-center {
content: "CONFIDENTIAL";
font-size: 10px;
color: #999;
}
}
@page {
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
font-size: 9px;
}
}
这里有两个重要的注意事项：首先，counter(pages)（总页数）在打印预览时可能正常显示，但在导出为PDF时，它常常会变成NaN（非数字）。其次，Firefox和Safari浏览器会直接忽略@top-left这类位置声明，导致样式完全失效。
替代方案：用 DOM 元素模拟页眉页脚（推荐）
既然@page这条路走不通，真正可靠且功能强大的方案是什么？答案是：彻底放弃@page，回归到使用DOM元素来模拟页眉页脚。
- 分页控制：为你的每一页内容包裹一个容器，并为其设置
page-break-after: always或更现代的break-after: page属性。 - 手动插入：在每个“页”容器内部，手动添加
元素。 - 打印样式：通过
@media print媒体查询来控制这些元素的显示、尺寸和定位。例如，让页眉固定在顶部：.print-header { position: fixed; top: 0; width: 100%; height: 20mm; } - 动态内容：如果需要显示当前章节名等动态信息，可以通过Ja vaScript将内容注入到对应页的
header元素中，然后触发一次重排即可。
这种方案的优点是兼容所有浏览器，并且支持完整的HTML、图标、响应式字体。但有个关键细节不能忘：你必须为正文内容显式设置足够的上边距（margin-top），以确保它不会与固定定位的页眉发生重叠。
最后，还有一个最容易被忽略的“坑”：即使采用了DOM模拟，Chrome在打印时，仍有可能将position: fixed的元素在每一页的顶部都重复渲染。一个实用的解决技巧是，只对第一页的页眉使用position: fixed，而后续页的页眉则改用position: absolute配合top: 0，并通过transform: translateY(-20mm)进行微调。遗憾的是，这并没有完美的标准解法，需要你反复进行打印预览和调试来找到最佳效果。
