如何通过 window.onbeforeprint 动态注入打印专属样式以优化报表输出效果-js教程-PHP中文网

直接在打印前注入样式比@media print更灵活，适合报表类页面；利用window.onbeforeprint动态插入专有CSS，并在onafterprint中清理，可实现主题切换、数据响应式样式及局部打印优化。

如何通过 window.onbeforeprint 动态注入打印专属样式以优化报表输出效果

直接在打印前注入样式，比提前写死 @media print 更灵活，尤其适合报表类页面——数据动态生成、主题可切换、或需临时覆盖全局样式时。关键在于利用 window.onbeforeprint 的时机，在浏览器准备渲染打印预览前，把专为打印设计的样式规则插入文档。

为什么 onbeforeprint 比纯 CSS 媒体查询更适用报表场景

报表常含图表、多级表头、条件色块等复杂结构。@media print 规则静态生效，无法响应数据状态（比如“金额超限标红”需在打印时转为黑底白字）；也无法按需加载高精度字体或重排版。而 onbeforeprint 是一个 JS 可控的“临界点”，此时 DOM 已就绪、用户已触发打印动作，正是注入定制样式的理想窗口。

动态注入样式的标准做法

核心思路：在监听函数中创建标签，写入仅用于打印的 CSS 规则，并追加到。打印结束后建议移除，避免干扰后续操作。

用 document.createElement('style') 创建新样式节点
将打印专用规则拼成字符串（注意转义换行与引号），赋给 textContent
调用 document.head.appendChild() 插入
在 window.onafterprint 中用 remove() 清理该节点

典型报表优化样式示例

以下代码片段可直接复用，适配财务/统计类报表常见需求：

网易人工智能

网易人工智能是一款围绕网易 AI 技术能力打造的智能应用与服务集合。

下载

隐藏交互控件、强制黑白、提升可读性：

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);