最稳妥的做法是用 CSS 媒体查询隔离打印样式：给不需要打印的区域加 class=”no-print”，再写 @media print { .no-print { display: none !important; } }。
怎么让 window.print() 打印出想要的页面内容
直接调用 window.print() 会把整个页面（包括导航栏、侧边栏、按钮）都塞进打印页，结果往往是一堆无用信息。关键不是“能不能打印”，而是“怎么只打该打的部分”。
最稳妥的做法是用 CSS 媒体查询隔离打印样式：
- 给不需要打印的区域加
class="no-print"，再写@media print { .no-print { display: none !important; } } - 避免用
visibility: hidden或opacity: 0—— 它们不影响布局，仍可能被打印出来 - 慎用
position: fixed元素：部分浏览器（如旧版 edge）会在每页重复渲染，造成内容重叠
打印时样式错乱？检查 @media print 的覆盖逻辑
很多问题不是没写打印样式，而是写了但被其他规则干掉了。CSS 在 print 媒体下依然遵循优先级规则，而你平时写的 .header { width: 100%; } 也会生效。
- 务必在
@media print块里重置关键样式，比如font-size、margin、padding，别指望浏览器默认值靠谱 - 不要依赖框架自带的 print 样式（如 bootstrap 的
print.css），它只处理基础组件，对自定义布局几乎无效 - chrome DevTools 的「Rendering」面板里勾选
Emulate CSS media: print，能实时预览效果，比反复点打印对话框快得多
为什么打印预览里表格/图片被截断或缩放异常
本质是浏览器对分页的自动处理太“努力”了——它会强行拆分块级元素，哪怕破坏语义。表格和图片尤其容易中招。
- 给
<table> 加 <code>style="page-break-inside: avoid;"，阻止跨页断裂（注意：IE 不支持，需 fallback） - 图片建议统一用
max-width: 100%; height: auto;，否则高 DPI 屏幕下可能被放大后溢出页面宽度 - 避免在打印区域使用
flex或grid布局：firefox 和 safari 对它们的分页支持不一致，容易出现空白页或错位 - 唯一可捕获的时机是用户关闭打印对话框后：监听
window.onafterprint（Chrome/Firefox/Edge 支持，Safari 仅部分版本支持） - 别试图用
try/catch包裹window.print()—— 它永远不会 throw - 如果业务强依赖“是否已触发打印”，只能靠 ui 状态标记（比如按钮变灰 + 文字提示“已发送至打印机”），而非真实确认
window.print() 触发后无法监听成功或失败
这个 API 是纯同步且无回调的，既不返回 promise，也不抛异常。用户点了取消、打印机离线、甚至 PDF 导出失败，你都收不到通知。
立即学习“前端免费学习笔记（深入）”；
打印这件事，表面是调一个函数，实际是跟每个浏览器的分页引擎、CSS 渲染器、甚至系统打印机驱动较劲。最麻烦的永远不是“怎么让它动”，而是“怎么让它不动歪地方”。