window.print()需配合@media print精准控制打印内容与样式，隐藏非必要元素、优化字体颜色、禁用背景图，动态替换dom可实现定制化打印，注意分页控制与浏览器兼容性。
直接调用 window.print() 会打印整个页面，但实际业务中常需隐藏导航栏、按钮、广告等非内容元素，或调整样式适配打印效果。关键不是“能不能打印”，而是“怎么只打想打的部分，并且打得清楚美观”。
用CSS媒体查询精准控制打印样式
浏览器在触发打印时会识别 @media print 规则，这是定制打印效果最标准、最可靠的方式。
- 把不想打印的元素设为
display: none，例如：.header, .sidebar, .print-hide { display: none !important; } - 为打印专门优化字体、颜色和间距：
@media print { body { font-size: 12pt; color: #000; line-height: 1.4; } a { color: #000; text-decoration: none; } } - 避免背景图和颜色干扰墨水消耗（尤其黑白打印机）：
@media print { * { background: transparent !important; } }
动态切换内容再打印：临时替换DOM
当需要打印的内容与页面展示结构差异较大（比如带图表的详情页要转成纯文本报告），可临时构建一个精简版DOM，打印完再还原。
盛世企业网站管理系统1.1.2
下载
免费 盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活 独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支
- 创建一个隐藏的
<div id="print-area">，只放入待打印的HTML片段<li>用 <code>document.body.innerHTML备份原内容，再替换成打印区域内容 - 调用
window.print()，之后立即恢复原DOM - 注意：部分浏览器（如Chrome）在打印对话框打开后会暂停JS执行，建议用
setTimeout延迟恢复，或监听afterprint事件（兼容性有限，仅Chrome/Edge支持） - 用
page-break-inside: avoid防止表格、卡片被切开 - 用
break-before: always或page-break-before: always强制某元素前分页（如每个章节标题前） - 慎用
position: fixed或absolute元素——它们可能在打印时消失或错位 - 测试时用浏览器的“打印预览”（Ctrl+P）而非截图，真实反映分页逻辑
- 打印前自动聚焦到内容区，避免因焦点在输入框导致打印空白页
- 禁用打印按钮本身（防止重复点击），打印结束后再启用
- 对含图片的页面，可提前检查图片是否加载完成（监听
img.onload），避免打印出空白占位 - 移动端需注意：Safari iOS 对
window.print()支持有限，部分机型会静默失败，建议降级提示“请手动分享为PDF”
避免常见坑：分页与内容截断
长内容容易在不该断的地方分页，影响可读性。CSS提供了一些实用控制手段：
立即学习“Java免费学习笔记（深入）”；
补充技巧：触发打印前做轻量准备
提升用户体验的小细节，不增加复杂度但很实用：
