window.print()本身不支持局部打印，必须依赖CSS媒体查询或DOM临时替换实现；前者更稳定无闪动，后者简单但有风险。
window.print() 本身不支持局部打印，必须靠 CSS 媒体查询或 DOM 临时替换实现；前者更稳定、无闪动，后者简单但有风险。
用 @media print 隐藏非目标区域（推荐）
这是最干净、兼容性最好的方式：不修改 DOM，不触发重排，也不影响用户交互。核心是让“不该打的不可见”，而不是“删掉它们”。
- 给要打印的容器加唯一标识，比如
id="print-section"或class="print-target" - 在
<style>或外部 CSS 中写：@media print { body * { visibility: hidden; } #print-section, #print-section * { visibility: visible; } #print-section { position: absolute; left: 0; top: 0; width: 100%; } } - 必须用
visibility: hidden而非display: none——否则目标区域可能因父容器塌陷而错位 - 加
position: absolute是为了防止其他隐藏元素仍占空白高度，影响分页
用 innerHTML 替换 body 实现局部打印（慎用）
适合简单页面或快速验证，但在 Vue/React/含复杂 JS 的页面中极易出问题：事件监听丢失、组件状态断裂、样式重置失败。
- 典型写法：
function printSection() { const original = document.body.innerHTML; const target = document.getElementById('print-section').innerHTML; document.body.innerHTML = target; window.print(); document.body.innerHTML = original; } - 执行后页面会瞬间白屏或布局跳变，用户可能误操作
- 如果原页面用了
document.write、eval、或依赖body存在的第三方脚本（如统计 SDK），会直接报错或失效 - 无法保留内联
style或动态插入的<link>，打印样式常丢失
为什么 window.print() 有时报 “Document is not focused”
Chrome/Edge 在非活跃 tab 或 iframe 中调用时会拒绝打印，这不是 bug，而是安全限制。
立即学习“前端免费学习笔记（深入）”；
- 常见触发场景：从弹窗按钮调用、定时器自动触发、iframe 内执行
- 低成本修复：在
window.print()前加window.focus()，哪怕当前已是焦点页 —— 多数浏览器忽略冗余 focus，但能绕过部分环境的检测 - 不要依赖
beforeprint或afterprint做关键逻辑：Firefox 不支持afterprint，且事件触发时机不可靠（比如用户取消打印，事件仍可能触发）
打印预览和实际输出不一致？检查这三处
预览 ≠ 真实输出，尤其在跨浏览器、跨设备时。很多“样式错乱”其实源于对 print 媒体特性的误判。
-
@media print里没重置font-size或line-height：屏幕用rem，打印建议改用pt（如12pt） - 背景图/色默认不打印：需显式加
-webkit-print-color-adjust: exact; color-adjust: exact; - 表格跨页断裂：加
table { page-break-inside: avoid; }，但注意某些旧版 Safari 无视该规则
真正难的不是“怎么调用”，而是“怎么让内容在 A4 纸上不被截断、不缩放、不丢色、不分错页”。这些细节不会报错，但会悄悄毁掉交付质量。
