javascript bom 无法直接控制打印预览界面，但可通过 window.print()、@media print 样式、dom 操作（如 iframe 隔离）及 onbeforeprint/onafterprint 事件间接精准控制预览内容与样式。
JavaScript BOM 本身不提供直接“控制打印预览页面”的 API，也没有办法 programmatically 打开或修改浏览器内置的打印预览界面（比如 Chrome 的 PDF 预览面板）。但你可以通过组合使用 window.print()、@media print 样式、DOM 操作和事件监听，**间接实现对打印预览内容与样式的精准控制**，让用户看到的预览结果尽可能符合预期。
用 @media print 精准定制预览样式
这是最核心、最稳定、跨浏览器兼容性最好的方式。浏览器在进入打印预览时，会自动启用 @media print 中定义的规则，而忽略屏幕样式。
- 隐藏非打印区域：比如导航栏、按钮、广告位、侧边栏等，避免它们出现在预览中
@media print { .header, .sidebar, .no-print { display: none !important; } } - 强制黑白适配：确保文字清晰、链接可读、背景色不影响识别
@media print { body { color: #000; background: #fff; } a { color: #000; text-decoration: underline; } } - 修复分页断裂：防止表格行、卡片、段落被截断在两页之间
@media print { table, .invoice-item { page-break-inside: avoid; break-inside: avoid; } } - 启用背景与图片打印（默认被禁用）：
@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }（注意：需显式设置background或background-image才生效）
用 DOM 操作临时聚焦打印内容
如果只想预览某一块区域（如一张报表、一个订单详情），不建议直接替换 document.body.innerHTML（会丢失脚本和全局样式），更稳妥的方式是：
- 创建一个隐藏的
<iframe></iframe>，注入目标 HTML + 打印专用 CSS - 将 iframe 内容设为打印主体，再调用其
contentWindow.print() - 这样预览时只显示该区域，且样式完全隔离，不影响主页面状态
用 onbeforeprint / onafterprint 做轻量级交互
这两个事件虽不精确（无法判断用户是否真点了“打印”，也无法捕获取消动作），但在预览阶段仍有实用价值：
-
window.onbeforeprint：在预览弹出前触发，适合插入动态信息，如当前时间、水印、页眉document.querySelector('.print-timestamp').textContent = '打印时间：' + new Date().toLocaleString(); -
window.onafterprint：在用户关闭预览对话框后触发，可用于恢复 DOM、清理临时节点或记录行为（注意：Safari 不支持此事件）
避免常见预览偏差
打印预览看起来“不对”，往往不是 JS 控制问题，而是样式或路径没处理好：
- 图片路径必须是绝对 URL 或相对于当前页面正确的相对路径，否则预览里显示空白
- 动态生成的内容（如异步加载的表格数据）必须确保在调用
window.print()前已渲染完成 - 不要依赖 JavaScript 动画或
display: none切换来控制打印可见性——用@media print才可靠 - Chrome 和 Edge 的预览默认缩放为 100%，Firefox 可能有细微差异，建议统一用
@page { size: A4; margin: 0.5in; }显式声明纸张
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
