window.onbeforeprint优化报表打印样式方法
2026-05-12 13:54:45
0浏览
收藏
本文介绍了如何利用 window.onbeforeprint 和 onafterprint 事件动态注入与清理打印专用 CSS，为报表类页面提供比静态 @media print 更灵活、更精准的打印样式优化方案——不仅能响应数据状态（如条件高亮转黑白）、按需加载字体或重排版，还可结合局部内容替换实现纯净打印输出，特别适用于含图表、多级表头和交互控件的财务与统计报表场景。
直接在打印前注入样式，比提前写死 @media print 更灵活，尤其适合报表类页面——数据动态生成、主题可切换、或需临时覆盖全局样式时。关键在于利用 window.onbeforeprint 的时机，在浏览器准备渲染打印预览前，把专为打印设计的样式规则插入文档。
为什么 onbeforeprint 比纯 CSS 媒体查询更适用报表场景
报表常含图表、多级表头、条件色块等复杂结构。@media print 规则静态生效，无法响应数据状态（比如“金额超限标红”需在打印时转为黑底白字）；也无法按需加载高精度字体或重排版。而 onbeforeprint 是一个 JS 可控的“临界点”，此时 DOM 已就绪、用户已触发打印动作，正是注入定制样式的理想窗口。
动态注入样式的标准做法
核心思路：在监听函数中创建
