onbeforeprint 不是 body 标签的合法属性，直接写在 HTML 中无效；它只能通过 JavaScript 绑定到 window 对象，如 window.addEventListener('beforeprint', handler)，并需配合 onafterprint 清理动态样式和 DOM 修改。
onbeforeprint 不是 body 标签的合法属性，直接写在 HTML 里无效 —— 浏览器会忽略它，也不会触发任何逻辑。
为什么 onbeforeprint 写在 body 上没用
HTML 规范中，onbeforeprint 是全局事件处理器（event handler），但它**不能作为 HTML 属性绑定到任意元素上**。它只对 window 对象有效，且必须通过 JavaScript 注册。
常见错误写法：<body onbeforeprint="injectPrintStyle()"> → 完全不执行，控制台无报错，也无任何副作用。
真正生效的方式只有一种：监听 window.onbeforeprint 或 window.addEventListener('beforeprint', ...)。
立即学习“前端免费学习笔记（深入）”；
如何用 window.onbeforeprint 动态调整排版
要在打印前注入样式、裁剪内容、重排 DOM，必须把逻辑挂到 window 上，并注意时序和副作用清理：
- 使用
window.addEventListener('beforeprint', handler, { once: true })更安全，避免重复绑定 - 动态插入
<style>时，务必加id（如id="print-dynamic-style"），便于后续移除 - 若替换
document.body.innerHTML，必须提前保存原始内容（建议用document.documentElement.outerHTML或克隆节点） - 不要在
beforeprint里修改location、触发 alert、或 await 异步操作 —— 打印流程会卡住或跳过 - Chrome 和 Edge 在
beforeprint触发时，页面已进入“准备打印”状态，DOM 修改仍有效，但 layout 重排可能被跳过；Firefox 行为更保守，建议所有样式注入都用<style>标签而非内联 style
容易被忽略的 cleanup 步骤
打印完成后，页面状态必须还原，否则用户继续操作时样式错乱、内容丢失：
- 在
onafterprint里移除动态插入的<style>（检查是否存在id="print-dynamic-style"） - 如果替换了
body.innerHTML，需用保存的原始 HTML 恢复，而不是简单document.body.outerHTML = ...—— 这会销毁所有绑定的事件监听器和 Vue/React 组件实例 -
onafterprint在 IE 中会在打印对话框弹出前触发，不是“打印完成”，所以不能依赖它做最终状态确认；现代浏览器（Chrome ≥63、Edge ≥12、Firefox ≥6）才真正按规范执行 - 若用了
document.head.appendChild(printStyle)，记得同时移除它，否则下次打印前样式残留，可能干扰新注入逻辑
最常被跳过的点：没有给动态样式加唯一标识，导致多次打印后堆叠多个 <style> 标签；或者恢复 DOM 时没重建 script 标签的执行上下文，造成 JS 功能中断。这些不会报错，但会让下一次交互行为异常。
