JavaScript打印功能核心是window.print()触发+@media print样式控制+DOM预处理。需隐藏非内容元素、强制分页、避免截断，并注意图片路径、字体兼容及浏览器差异。
JavaScript 中实现打印功能主要靠 window.print()，但真正控制打印效果得靠 CSS 媒体查询和页面结构优化。光调用打印命令不够，用户常遇到内容被截断、空白页多、样式错乱等问题，核心在于“打印前准备”和“打印样式分离”。
用 window.print() 触发浏览器原生打印
这是最直接的方式，适合快速启用打印功能：
- 在按钮点击事件里写
window.print()，浏览器会弹出系统打印对话框 - 它默认打印当前整个
<body>可见内容，不执行异步操作（比如未加载完的图片可能留白） - 注意：该方法会阻塞后续 JS 执行，且无法监听是否真正打印成功或取消
用 @media print 定制打印样式
这是控制打印效果的关键。通过 CSS 媒体查询隐藏无关元素、调整布局、适配纸张：
- 在样式表中添加
@media print { ... }块，里面写的样式只在打印时生效 - 常见操作：隐藏导航栏、侧边栏、按钮等非内容区域 ——
.header, .sidebar, .print-btn { display: none; } - 强制分页：用
page-break-before: always或break-before: page（推荐后者，更现代）控制标题另起一页 - 避免内容被截断：给长表格加
table { page-break-inside: auto; }，给行内元素加word-break: break-word;
打印前临时修改 DOM 提升兼容性
有些场景下纯 CSS 不够用，比如要打印弹窗内容、或只打印某块区域：
立即学习“Java免费学习笔记（深入）”；
- 创建一个隐藏的
<div id="print-area">，把目标内容克隆进去，再调用print() - 更稳妥的做法是：打开一个新窗口（
window.open('', '_blank')），写入定制 HTML 和打印样式，再自动执行print()并关闭 - 示例片段：
const w = window.open();<br>w.document.write(htmlString);<br>w.document.close();<br>w.print();<br>w.close();
注意：部分浏览器会拦截弹窗，建议在用户点击后立即触发
处理图片、字体和跨浏览器细节
打印时资源加载和渲染行为和屏幕不同，容易出问题：
- 确保图片使用绝对路径或已缓存，否则打印时可能显示为占位符
- 避免依赖 Web 字体（如 Google Fonts），打印时很可能回退成系统字体；如需统一，优先用
serif/sans-serif - Chrome 和 Edge 对
break-*属性支持较好；Firefox 需加-moz-前缀；Safari 有时忽略某些分页指令，建议测试真实打印机输出 - 可加
@page { margin: 0.5in; }统一设置页边距（注意：不能在里面写选择器，只支持简单属性）
基本上就这些。打印功能本身不复杂，但细节容易忽略——关键是把“屏幕展示”和“纸面输出”当成两个独立视图来设计。
