Chrome打印预览中页眉页脚开关在Ctrl+P/Cmd+P打开的打印面板右下角“更多设置”内，需取消勾选“页眉和页脚”复选框；@page仅支持页边距设置，:first伪类不可嵌套样式；position:fixed页眉页脚在PDF中仅首屏渲染；页码必须用class="pageNumber"和"totalPages"，否则不生效。
Chrome DevTools 打印预览中页眉页脚开关在哪
Chrome 默认开启系统页眉页脚（含 URL、页码、日期），这会覆盖你用 CSS 写的 @page 页边距或 position: fixed 页眉页脚。必须手动关闭——它不在网页代码里，而在打印设置界面。
- 按
Ctrl+P（Windows）或Cmd+P（macOS）唤出打印面板 - 点击右下角「更多设置」展开区域
- 取消勾选「页眉和页脚」复选框（注意：不是「背景图形」，也不是「页面边距」）
- 此时
@page { margin: 2cm; }和自定义页眉页脚才真正生效
CSS @page + :first 伪类控制首页页眉不同
PDF 分页由浏览器渲染引擎自动触发，@page 是唯一能影响分页后整体布局的 CSS 规则。但 @page :first 只对第一页生效，且不能写选择器嵌套内容，只能设页边距与空白。
@page {
margin: 1.5cm;
}
@page :first {
margin-top: 3cm; /* 首页留高一点，方便放标题 */
}
/* ❌ 错误：以下无效 */
@page :first {
header { display: none; } /* 不支持 */
}想让首页无页眉、其余页有，得靠 JS 动态加 class 控制 DOM 元素显隐，再结合 @page 调整页边距匹配视觉留白。
position: fixed 页眉页脚在 PDF 中失效原因
Chrome 的 PDF 导出不支持 position: fixed 在跨页时重复渲染（即不会每页都显示一个固定定位元素）。它只会在第一页渲染一次，后续页丢失。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用
@page的margin预留空间，再用普通<header>+margin-top模拟页眉 - 更可靠做法：服务端生成 PDF（如 Puppeteer、WeasyPrint），它们支持
@page :left/:right和running()函数 - Puppeteer 示例关键配置：
await page.pdf({ displayHeaderFooter: true, headerTemplate: '<div style="font-size:10px;margin-left:1cm;">Report v2.1</div>', footerTemplate: '<div style="font-size:9px;text-align:right;margin-right:1cm;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>', printBackground: true });
页码显示用 class="pageNumber" 而不是 data-* 属性
Chrome 原生 PDF 导出只识别两个特殊 class 名：pageNumber 和 totalPages。它们是硬编码解析的，写成 data-page-number 或 pg-num 完全无效。
-
<span class="pageNumber"></span>→ 渲染为当前页数字（如 “3”） -
<span class="totalPages"></span>→ 渲染为总页数（如 “12”） - 这两个 class 必须出现在
headerTemplate或footerTemplate字符串中，不能靠 JS 插入 - 若用纯前端导出（如 jsPDF），需自行计算分页并逐页写入页码，复杂度陡增
实际转 PDF 时最易忽略的是：页眉页脚是否启用，完全由客户端打印设置决定，和服务端 HTML 结构无关；而页码占位符名是死的，拼错一个字母就变空白。
