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”，而是提前保存可还原的上下文：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 打印前，用
JSON.stringify或structuredClone（支持时）保存关键 state，比如表单输入值、展开的折叠面板、当前 tab 索引 - 若用 Vuex/Pinia，打印前 commit 一个
SAVE_PRINT_SNAPSHOTmutation，onafterprint中 dispatchRESTORE_FROM_SNAPSHOT - 纯 JS 场景下，避免直接改
document.body.innerHTML；改用document.body.appendChild(tempEl)+document.body.removeChild(originalEl)，这样事件绑定和元素引用不会断 - 对动态插入的打印专用样式表（如
<link rel="stylesheet" media="print">），打印前用sheet.disabled = true关闭，onafterprint中设为false，比反复增删<style></style>标签更稳
@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() 方法。
