直接在打印前注入样式比@media print更灵活，适合报表类页面；利用window.onbeforeprint动态插入专有CSS，并在onafterprint中清理，可实现主题切换、数据响应式样式及局部打印优化。
直接在打印前注入样式，比提前写死 @media print 更灵活，尤其适合报表类页面——数据动态生成、主题可切换、或需临时覆盖全局样式时。关键在于利用 window.onbeforeprint 的时机，在浏览器准备渲染打印预览前，把专为打印设计的样式规则插入文档。
为什么 onbeforeprint 比纯 CSS 媒体查询更适用报表场景
报表常含图表、多级表头、条件色块等复杂结构。@media print 规则静态生效，无法响应数据状态（比如“金额超限标红”需在打印时转为黑底白字）；也无法按需加载高精度字体或重排版。而 onbeforeprint 是一个 JS 可控的“临界点”，此时 DOM 已就绪、用户已触发打印动作，正是注入定制样式的理想窗口。
动态注入样式的标准做法
核心思路：在监听函数中创建 <style></style> 标签，写入仅用于打印的 CSS 规则，并追加到 。打印结束后建议移除，避免干扰后续操作。
- 用
document.createElement('style')创建新样式节点 - 将打印专用规则拼成字符串（注意转义换行与引号），赋给
textContent - 调用
document.head.appendChild()插入 - 在
window.onafterprint中用remove()清理该节点
典型报表优化样式示例
以下代码片段可直接复用，适配财务/统计类报表常见需求：
隐藏交互控件、强制黑白、提升可读性：
const printStyle = document.createElement('style');
printStyle.textContent = `
@page { margin: 0.5cm; }
body { font-family: "SimSun", "Noto Serif CJK SC", serif; font-size: 10pt; line-height: 1.4; }
.toolbar, .chart-controls, .export-btn { display: none !important; }
.highlight-red { background-color: #000 !important; color: #fff !important; }
a { color: #000 !important; text-decoration: none !important; }
img { max-width: 100% !important; height: auto !important; }
`;
document.head.appendChild(printStyle);
配合局部打印提升精准度
报表往往只需打印表格区域，而非整个页面。可在 onbeforeprint 中一并完成内容裁剪与样式注入：
- 先保存原始
body.innerHTML - 用
document.getElementById('report-table').outerHTML替换body内容 - 再注入上述打印样式
- 在
onafterprint中还原原始 HTML 并移除样式节点
这样既保证了内容纯净，又让样式只作用于真正要输出的部分，避免页眉页脚错位、分页断裂等问题。
