window.print() 默认打印整个 DOM，导致导航栏、广告、浮动元素等干扰内容被输出；必须用 @media print 精准控制可见节点、重置样式（如 float: none、position: static）、强制黑白、补全链接 URL，并规范表格分页（如 page-break-inside: avoid、thead { display: table-header-group }），配合开发者工具模拟打印预览调试。
为什么直接调用 window.print() 总是打印出一堆乱七八糟的东西
因为浏览器默认把整个 DOM 树原样塞进打印流，导航栏、广告位、按钮、浮动侧边栏、背景图、半透明遮罩……全在。它们在屏幕上可能很酷，但打出来就是墨水浪费+阅读干扰。
关键不是“能不能触发打印”，而是你有没有告诉浏览器：“只把这些节点当内容，其余全闭嘴”。@media print 就是这句指令的唯一合法入口。
- 别依赖浏览器默认值：字号、行高、页边距、颜色——全得重写，用
pt或mm单位，不用px -
visibility: hidden和opacity: 0不起作用，它们不脱离文档流，仍可能被渲染进打印页 - 旧版 Edge 对
position: fixed元素会在每页重复打印，造成文字堆叠；稳妥做法是统一设为position: static !important
@media print 里必须写的几条保命规则
光写 display: none 不够，很多样式冲突会悄无声息地覆盖你的意图。以下这几条建议直接抄进你的 @media print 块开头：
- 重置所有浮动：
* { float: none !important; }（float在打印中基本不可控） - 清空绝对定位：
* { position: static !important; }（absolute和fixed容易错位或重复） - 强制文本纯黑+白底：
body { color: #000 !important; background-color: #fff !important; } - 启用背景色打印（如需）：
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }（注意：部分打印机固件仍会忽略） - 链接补 URL：
a[href]:after { content: " (" attr(href) ")"; }（否则纸上只剩“点击这里”四个字）
表格和分页控制最容易翻车的三个点
表格跨页断裂、标题消失、列宽崩坏——这些问题几乎都源于没处理好三类 CSS 行为。
立即学习“前端免费学习笔记（深入）”；
-
tr元素必须加page-break-inside: avoid，否则一行数据被硬生生劈成两页（注意：部分浏览器要求同时设display: table-row） -
thead跨页时不会自动重复，得显式声明：thead { display: table-header-group; }（tfoot同理） - 避免用
flex或grid布局表格容器；打印引擎对它们支持极弱，一律转成display: block+width: 100%更稳
调试打印样式时浏览器开发者工具怎么用才不白忙
别等真连打印机才试——90% 的问题靠预览就能暴露。Chrome / Edge / Safari 的 DevTools 都支持模拟 print 媒体，但很多人开错地方。
- 打开开发者工具 → 右上角「⋯」→ 「More Tools」→ 「Rendering」→ 勾选「Emulate CSS media type」→ 下拉选
print - 此时页面立即变成灰白稿状态，所有
@media print规则生效，你可以实时改样式、看效果 - 重点检查：
computed面板里搜索display，确认该隐藏的元素是否真为none；搜索page-break，看断点是否落在预期位置 - 导出 PDF 比真打更高效：打印对话框里选「另存为 PDF」，能快速验证分页、字体嵌入、图片缩放是否正常
实际项目里最常被忽略的，是打印样式表的加载时机和优先级。如果你用 <link rel="stylesheet" href="print.css" media="print">，确保它放在所有其他样式表之后；否则屏幕样式可能把 print 规则盖掉，而你根本看不到报错。
