浏览器原生打印无法自定义页眉页脚，css和js不可控；可用@page留白+fixed定位元素模拟内容区页眉页脚；需稳定控制则必须用puppeteer等服务端pdf生成方案。
浏览器原生打印不支持自定义页眉页脚
Chrome、Edge、Firefox 等主流浏览器在调用 window.print() 时，会强制渲染自带的页眉（如 URL、标题）和页脚（如页码），且这些内容完全由浏览器控制，CSS 和 JavaScript 无法覆盖或隐藏——除非用户手动在打印设置里关掉「页眉页脚」选项，但这不可控，也不适用于自动化场景。
所以，别试图用 @page 或 ::-webkit-print-color-adjust 去“覆盖”原生页眉页脚，它们对页眉页脚区域无效。
用 CSS @page + 伪元素模拟页眉页脚（仅限内容区）
虽然不能动浏览器原生页眉页脚，但可以在每页的内容区域顶部/底部插入固定位置的块，视觉上模拟页眉页脚。关键点是：
-
@page本身不能加背景或内容，但配合:first、:left、:right可设定页边距，为模拟留出空间 - 真正起作用的是
position: fixed+top/bottom的元素，且必须设page-break-inside: avoid防止被截断 - 需用
@media print隐藏非打印元素，并确保模拟页眉页脚只在打印时显示
示例片段：
@media print {
@page {
margin-top: 40px;
margin-bottom: 40px;
}
.print-header {
position: fixed;
top: 10px;
left: 0;
right: 0;
height: 20px;
font-size: 12px;
text-align: center;
color: #666;
}
.print-footer {
position: fixed;
bottom: 10px;
left: 0;
right: 0;
height: 20px;
font-size: 12px;
text-align: center;
color: #666;
}
}
导出 PDF 时用 Puppeteer 替代浏览器打印
当需要稳定、可编程控制页眉页脚（比如插入公司 logo、动态页码、当前时间），直接走前端打印行不通，得换后端生成 PDF。Puppeteer 是最常用方案，它能精确注入 HTML 片段到页眉页脚：
- 用
headerTemplate/footerTemplate传入字符串，支持<span class="date"></span>、<span class="pageNumber"></span>、<span class="totalPages"></span>这类占位符 - 模板内不能执行 JS，但 Puppeteer 会自动替换上述占位符
- 注意：模板中所有样式必须内联，外部 CSS 不生效；字体需确保系统存在或已加载 WebFont
- 页眉页脚高度受
margin影响，建议统一设display: block; height: 25mm;控制尺寸
简例：
await page.pdf({
headerTemplate: '<div style="font-size:10px; padding:5mm 10mm; border-bottom:1px solid #ccc">Report v2.1</div>',
footerTemplate: '<div style="font-size:10px; padding:5mm 10mm; text-align:right">
<span class="pageNumber"></span>/<span class="totalPages"></span>
</div>',
format: 'A4',
printBackground: true
});
页码动态计算只能靠服务端或 PDF 工具
纯前端无法在打印前知道总页数，document.querySelectorAll('.page').length 没意义——因为分页由浏览器排版引擎实时决定，且无 API 暴露。所以：
- 不要尝试用 JS 遍历
getClientRects()或监听beforeprint来算页数，结果不可靠 - 如果必须前端实现带总页数的页脚（如“第 3 页，共 ? 页”），唯一办法是先用 Puppeteer / wkhtmltopdf 渲染一次 PDF 获取页数，再重新生成含正确总数的 HTML
- 某些 PDF 库（如 pdfmake）支持二次写入页码，但前提是放弃“直接打印 HTML”，转向生成式流程
真正上线项目里，95% 的“页眉页脚需求”最终都走向了服务端 PDF 生成，而不是死磕 window.print()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
