javascript中可用beforeprint/afterprint事件或window.matchmedia('print')监听打印状态：前者非标准但兼容主流浏览器，后者更标准；两者均需绑定在window上，注意spa内存泄漏及移动端兼容性。
JavaScript 本身没有原生的“打印前”或“打印后”事件，但可以通过 window.matchMedia 监听打印媒体查询变化，结合 beforeprint 和 afterprint 这两个非标准但被主流浏览器（Chrome、Edge、Firefox、Safari）广泛支持的事件来实现。
使用 beforeprint 和 afterprint 事件
这两个事件在页面即将进入打印预览（或开始打印）和退出打印预览（或打印完成）时触发，是目前最直接的方案：
- beforeprint：在浏览器打开打印对话框或生成打印预览前触发，适合隐藏不需要打印的元素、切换样式、暂停动画或保存当前状态。
- afterprint：在用户关闭打印对话框（无论是否执行了打印）后触发，适合恢复界面、重置 DOM 或清理临时修改。
注意：它们不区分用户是否最终点击了“打印”，只响应打印流程的开启与关闭。
监听 print 媒体查询变化（更标准的替代方案）
由于 beforeprint/afterprint 属于非标准事件（未被 HTML 规范正式采纳），更推荐用 window.matchMedia('print') 的 addEventListener('change') 来响应：
- 当
mql.matches === true，说明页面进入了打印模式（等效于beforeprint）； - 当
mql.matches === false，说明退出了打印模式（等效于afterprint）。
这种方式兼容性好、标准化程度高，且在现代浏览器中行为稳定。示例：
const mql = window.matchMedia('print');
mql.addEventListener('change', (e) => {
if (e.matches) {
console.log('准备打印：可隐藏侧边栏、移除背景图等');
} else {
console.log('打印结束：恢复界面状态');
}
});
实际应用中的关键细节
需注意几个容易出错的点：
- 打印事件不会冒泡，只能绑定在
window上（不能用document或其他元素监听）； - 在单页应用（如 React、Vue）中，需确保事件监听器在组件卸载时被移除，避免内存泄漏；
- 移动端 Safari 对
beforeprint/afterprint支持有限，优先使用matchMedia方案； - 某些 PDF 导出库（如 jsPDF）或无头浏览器（Puppeteer）不触发这些事件，需另行处理。
简单封装一个打印生命周期管理器
可以封装一个轻量工具，统一处理打印前后的逻辑：
class PrintLifecycle {
constructor() {
this.handlers = { before: [], after: [] };
this.mql = window.matchMedia('print');
this.mql.addEventListener('change', this.handleMediaChange.bind(this));
}
onBefore(cb) { this.handlers.before.push(cb); }
onAfter(cb) { this.handlers.after.push(cb); }
handleMediaChange(e) {
const list = e.matches ? this.handlers.before : this.handlers.after;
list.forEach(fn => fn());
}
destroy() {
this.mql.removeEventListener('change', this.handleMediaChange);
}
}
// 使用
const printer = new PrintLifecycle();
printer.onBefore(() => document.body.classList.add('printing'));
printer.onAfter(() => document.body.classList.remove('printing'));
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
