本文详解如何通过 CSS @media print 媒体查询实现打印时页眉页脚的精细化控制，包括全局隐藏、仅首页显示、自定义内容及避坑指南，避免依赖 JavaScript 动态操作 DOM。
本文详解如何通过 css `@media print` 媒体查询实现打印时页眉页脚的精细化控制，包括全局隐藏、仅首页显示、自定义内容及避坑指南，避免依赖 javascript 动态操作 dom。
在网页打印场景中，浏览器默认会将整个 <body> 可见区域（含导航栏、按钮、侧边栏等）一并输出，而原生打印对话框中的“页眉/页脚”选项（如 URL、日期、页码）属于浏览器 UI 层控制，无法通过 HTML/CSS 直接定制其内容，也无法实现“仅第一页显示标题”这类逻辑。真正可控的，是页面自身的 <header> 和 <footer> 元素——它们必须通过 CSS 媒体查询进行声明式隐藏或样式重置。
✅ 正确做法：用 @media print 精准控制自有头尾元素
为你的 HTML 结构添加语义化打印类，并在 <style> 或外链 CSS 中定义打印样式：
<!-- 在 <head> 中添加以下样式 -->
<style>
/* 默认屏幕下正常显示 */
.print-header, .print-footer { display: block; }
/* 打印时：全局隐藏原生 header/footer，仅保留首页 header */
@media print {
/* 隐藏所有非打印区域（含按钮、导航等） */
.no-print, #printPage, .sidebar, .ad-banner {
display: none !important;
}
/* 隐藏全局 header 和 footer */
header, footer {
display: none !important;
}
/* 仅在第一页显示自定义 header —— 使用 :first-child 无法直接匹配页，需借助伪元素 + 分页控制 */
/* 更可靠方案：为首页 header 单独加 class，并利用分页强制其仅出现在第一页 */
.header-first-page {
display: block !important;
page-break-after: avoid; /* 尽量保持其与后续内容同页 */
}
.header-not-first-page {
display: none !important;
}
/* 重置 body 样式以适配打印 */
body {
font-size: 12pt;
color: #000;
margin: 0;
padding: 0;
background: #fff;
}
/* 确保表格完整打印，避免跨页断裂 */
table {
page-break-inside: avoid;
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 4px 6px;
vertical-align: top;
}
/* 强制打印时使用黑色文字（避免彩色背景干扰） */
* {
text-shadow: none !important;
box-shadow: none !important;
background: transparent !important;
}
}
</style>然后修改你的 HTML 结构，将 <header> 和 <footer> 替换为支持分页逻辑的结构：
<!-- 替换原 <header> -->
<div class="header-first-page d-flex justify-content-evenly align-items-center p-3 border-bottom">
<img src="{{ asset('assets/images/media/DAIA.png') }}" alt="DAIA" style="height: 80px; width: 120px;">
<div class="text-center fs-6 fw-bold">
د افغانستان اسلامی امارت<br/>
د عامی روغتیا وزارت <br/>
د مالی او حسابی چارو معینیت <br/>
د اداری ریاست <br/>
د بیومدیکل انجنیری دیپارتمنت آمریت
</div>
<img src="{{ asset('assets/images/media/MoPH.jpeg') }}" alt="MoPH" style="height: 75px; width: 110px;">
</div>
<!-- 主体内容保持不变 -->
<main class="print-content">
<!-- ... your table and content here ... -->
</main>
<!-- 替换原 <footer> -->
<div class="footer-first-page d-flex justify-content-end p-3 border-top">
<p class="mb-0">ملاحظات</p>
</div>
<!-- 打印按钮仍保留，但加 no-print 类 -->
<button type="button" id="printPage" onclick="Print()" class="d-block mx-auto btn btn-primary btn-lg col-2 no-print">
Print
</button>? 关键说明：CSS 本身不支持“仅第一页显示某元素”的原生选择器（如 @page :first { > header { ... } } 无效）。实际工程中，有两类主流解法：
- 推荐方案（本例采用）：将“仅首页需要的内容”显式放在文档顶部（即 .header-first-page），利用 page-break-after: avoid 尽量防止其被分页截断；其余页无需重复渲染该 header。
- 进阶方案（需服务端或 JS 渲染）：生成多页 PDF（如通过 Puppeteer 或 wkhtmltopdf），或使用 @page + ::before/::after 插入页眉页脚（但内容受限，仅支持简单字符串、页码、计数器，且不支持 HTML 结构或图片）。
⚠️ 常见失效原因与避坑清单
| 问题现象 | 根本原因 | 解决方案 |
|---|---|---|
| .no-print 未生效 | CSS 加载顺序靠后，被 Bootstrap/Tailwind 等框架样式覆盖 | 将 @media print 规则置于所有 CSS 的最后，或使用 !important（已示例中体现） |
| 打印后布局错乱（Flex/Grid 失效） | 旧版浏览器（如 IE、部分 Edge）对打印上下文中的 display: flex/grid 支持不佳 | 打印样式中统一使用 display: block / inline-block，避免复杂布局 |
| 表格跨页断裂、内容丢失 | 浏览器默认允许表格跨页分割 | 添加 table { page-break-inside: avoid; } 强制整表打印 |
| 按钮/图标仍被打印 | 忘记给打印触发控件添加 .no-print 类 | 所有非内容型 UI 元素（按钮、弹窗、广告）均需统一标记并隐藏 |
| 黑白打印文字发灰、看不清 | 使用了 color: gray 或半透明色 | 打印样式中强制 color: #000;，禁用 opacity 和 visibility（二者不阻止打印） |
✅ 最佳实践总结
- 永远优先用 CSS，而非 JS：不要在 window.print() 前后用 JS display: none 切换元素——异步组件、Vue/React 重绘可能漏处理，且破坏可访问性。
- 语义化类名统一管理：如 .no-print、.print-only、.header-first-page，便于团队协作与维护。
- 测试必须覆盖多浏览器：Chrome（最新版）、Edge（Chromium 内核）、Firefox —— Safari 打印引擎差异较大，务必实机验证。
- 提供打印预览提示：可在按钮旁增加小字提示：“打印前请按 Ctrl+P 查看预览效果”。
通过上述方案，你将获得稳定、可维护、符合现代 Web 标准的打印体验，真正实现「所见即所得」的专业级输出控制。
