应使用@media print配合.no-print类隐藏非打印元素，而非JS操作DOM；关键要加!important且确保规则仅在打印时生效，避免破坏页面正常显示。
使用 window.print() 触发浏览器打印很简单，但真正难点在于：打印时样式错乱、内容截断、多余元素（如导航栏、按钮）被一起打出来。关键不是“怎么调用”，而是“怎么让打印结果干净、可控、符合预期”。
打印前清理页面结构
直接调用 window.print() 会把当前整个 <body> 打印出去，通常包含页眉、侧边栏、广告位等非正文内容。建议在打印前临时隐藏无关区域：
- 给需要打印的主内容区域加一个明确的 class，比如
class="print-content" - 用 CSS 的
@media print隐藏其他部分：
.header, .nav, .sidebar, .print-trigger { display: none !important; } - 或者用 JS 动态切换类名：
document.body.classList.add('printing');
然后在 CSS 中写：
@media print { body:not(.printing) { display: none; } }（不推荐，可能影响可访问性）
用 @media print 精确控制打印样式
这是适配打印效果的核心手段。浏览器在执行 window.print() 时会自动启用 @media print 规则，它优先级高于普通样式，且只在打印预览/输出时生效：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 重置字体、颜色、背景（打印机默认不打印背景色和图片，除非用户手动开启）：
@media print { * { color: #000 !important; background: transparent !important; text-shadow: none !important; } - 强制显示链接 URL（对 PDF 归档很有用）：
a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } - 避免分页截断表格或代码块：
table, pre { page-break-inside: avoid; } - 控制分页位置（如标题后必须换页）：
h1 { page-break-after: always; }
触发打印的合理时机与交互
不要一进页面就自动打印，也不要在未告知用户的情况下调用 window.print()。最佳实践是提供一个明确的“打印”按钮，并做最小化准备：
立即学习“Java免费学习笔记（深入）”；
- 点击按钮后，可先聚焦到主要内容区（提升可访问性）：
document.querySelector('.print-content')?.focus(); - 调用前稍作延迟（确保样式已应用，尤其动态加载的内容）：
setTimeout(() => window.print(), 100); - 打印结束后，可自动恢复焦点或提示用户（注意：无法监听“打印完成”事件，但可以监听
afterprint）：
window.addEventListener('afterprint', () => console.log('用户已关闭打印窗口'));
补充：兼容性与常见陷阱
window.print() 在所有现代浏览器中都支持，但行为细节有差异：
- 移动端 Safari 不支持
afterprint事件；Chrome 和 Firefox 支持 - 某些内联 SVG 或 Canvas 内容在打印时可能丢失，建议用纯 HTML/CSS 替代
- 绝对定位元素容易被裁剪，打印时尽量用相对布局或设置
position: staticfor print - 如果用了 CSS-in-JS（如 styled-components），需确保
@media print规则被正确注入到 style 标签中
