JavaScript 中 BOM 怎么使用 window.print 触发浏览器的网页打印与样式适配-js教程-PHP中文网

应使用@media print配合.no-print类隐藏非打印元素，而非js操作dom；关键要加!important且确保规则仅在打印时生效，避免破坏页面正常显示。

javascript 中 bom 怎么使用 window.print 触发浏览器的网页打印与样式适配

使用 window.print() 触发浏览器打印很简单，但真正难点在于：打印时样式错乱、内容截断、多余元素（如导航栏、按钮）被一起打出来。关键不是“怎么调用”，而是“怎么让打印结果干净、可控、符合预期”。

直接调用 window.print() 会把当前整个打印出去，通常包含页眉、侧边栏、广告位等非正文内容。建议在打印前临时隐藏无关区域：

给需要打印的主内容区域加一个明确的 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; } }（不推荐，可能影响可访问性）

这是适配打印效果的核心手段。浏览器在执行 window.print() 时会自动启用 @media print 规则，它优先级高于普通样式，且只在打印预览/输出时生效：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

重置字体、颜色、背景（打印机默认不打印背景色和图片，除非用户手动开启）：
@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()。最佳实践是提供一个明确的“打印”按钮，并做最小化准备：

点击按钮后，可先聚焦到主要内容区（提升可访问性）：
document.querySelector('.print-content')?.focus();
调用前稍作延迟（确保样式已应用，尤其动态加载的内容）：
setTimeout(() => window.print(), 100);
打印结束后，可自动恢复焦点或提示用户（注意：无法监听“打印完成”事件，但可以监听 afterprint）：
window.addEventListener('afterprint', () => console.log('用户已关闭打印窗口'));