onafterprint 不是打印完成确认，而是浏览器在打印对话框关闭后立即触发的不可靠信号，此时 DOM 和样式可能仍处于打印态，安全恢复需依赖打印前的状态快照与框架感知还原。

onafterprint 不是“打印完成确认”，它只是个信号，浏览器在打印对话框关闭后触发，但此时页面 DOM 可能还没真正从打印态切回屏幕态——尤其在 Chrome 中，onafterprint 触发时，@media print 样式可能仍残留、DOM 结构可能已被临时修改，直接靠它“恢复”容易失败。

onafterprint 触发时机不可靠，别把它当回调函数用

Chrome 和 Firefox 中，onafterprint 在用户点“取消”或“打印”后立即触发，不等实际打印任务结束；Edge（旧版）甚至在打印对话框弹出前就执行。这意味着：

• 你不能假设此时 document.body 还是原始结构——如果之前用了 innerHTML = ... 替换内容，事件监听、Vue 响应式数据、React state 全丢了
• @media print 的样式规则可能尚未退出，getComputedStyle 读到的仍是打印态值
• 若页面用了 transform 或 filter 模拟打印预览，onafterprint 里重置这些属性往往来不及生效

真正安全的恢复方式：状态快照 + 框架感知还原

恢复的关键不是“逆向操作 DOM”，而是提前保存可还原的上下文：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 打印前，用 JSON.stringify 或 structuredClone（支持时）保存关键 state，比如表单输入值、展开的折叠面板、当前 tab 索引
• 若用 Vuex/Pinia，打印前 commit 一个 SAVE_PRINT_SNAPSHOT mutation，onafterprint 中 dispatch RESTORE_FROM_SNAPSHOT
• 纯 JS 场景下，避免直接改 document.body.innerHTML；改用 document.body.appendChild(tempEl) + document.body.removeChild(originalEl)，这样事件绑定和元素引用不会断
• 对动态插入的打印专用样式表（如 ），打印前用 sheet.disabled = true 关闭，onafterprint 中设为 false，比反复增删 标签更稳

@media print 里写的 reset 规则根本没机会执行

很多人在 @media print 末尾写类似 body { color: initial !important; }，指望打印完自动恢复——这是错觉。@media print 只在打印上下文中生效，一旦退出，浏览器不会“反向应用”这些规则。真正起作用的是：

• 你在 @media screen 中定义的原始样式（必须存在且未被 !important 覆盖）
• 手动清除 inline style：el.style.color = ''、el.removeAttribute('style')
• 移除临时 class：el.classList.remove('print-mode-active')
• 注意：不要用 visibility: hidden 切换打印区域，它占文档流，会影响分页；改用 display: none + 显式切换

最易被忽略的点：打印前后 DOM 的 offsetHeight、scrollHeight 可能突变，导致第三方库（如虚拟滚动、图表库）内部缓存错乱——恢复时不仅要还原样式和内容，还得主动触发 resize 或调用库的 refresh() 方法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！