Less中@media print易失效主因非语法错误，而是加载顺序靠前被后续屏幕样式覆盖、选择器权重不足（如Naive UI组件默认样式优先级高）、构建压缩工具误删空规则；需统一收口至末尾导入的print.less文件，用mixin封装防断页/重置样式，并验证真实打印效果。
为什么直接写 @media print 在 Less 里容易失效
Less 编译后仍是普通 CSS，@media print 本身没问题，但常见失效不是语法错误，而是加载顺序、选择器权重和框架干扰。比如 Naive UI 的 .n-layout-sider 默认样式权重高，单纯在 @media print 块里写 .n-layout-sider { display: none; } 可能被覆盖；又或者你用 @import 引入了多个 Less 文件，而打印规则被插在中间，被后续的屏幕样式反向压过。
实操建议：
- 把所有打印相关规则统一收口到一个文件（如
src/styles/print.less），并在主样式入口末尾@import它 - 避免在组件级 Less 中零散写
@media print，否则难以全局控制、易遗漏动态渲染区域（如.n-modal、.n-notification） - 检查构建工具是否启用了
css-minimizer-webpack-plugin等压缩器——某些版本会误删空规则或合并时破坏媒体查询结构
用 Less 混合器封装常用打印行为
重复写 page-break-inside: avoid、break-inside: avoid、orphans: 3 很枯燥，也容易漏。Less 的 .mixin 能把这类逻辑收敛，还能带参数适配不同场景。
例如定义一个表格行防断页混合器：
立即学习“前端免费学习笔记（深入）”；
.print-keep-row() {
page-break-inside: avoid !important;
break-inside: avoid !important;
orphans: 3;
widows: 3;
}
再在表格样式中调用：
.n-data-table-tr {
.print-keep-row();
}
更进一步，可加参数控制是否强制分页：
.print-section(@break-before: false) {
page-break-inside: avoid !important;
break-inside: avoid !important;
orphans: 3;
widows: 3;
& when (@break-before = true) {
page-break-before: always !important;
}
}
.n-report-header {
.print-section(true);
}
变量 + 混合器统一管理打印字体与颜色
打印时最常踩的坑是颜色没重置：深色模式下 color: #1890ff 打出来灰蒙蒙，背景色没清导致整页黑底白字——激光打印机直接卡纸。Less 变量能确保“一次改，全项目生效”。
推荐在 _variables.less 中定义：
@print-font-size: 12pt; @print-line-height: 1.4; @print-text-color: #000; @print-bg: transparent;
然后封装基础重置混合器：
.print-reset() {
color: @print-text-color !important;
background: @print-bg !important;
font-size: @print-font-size !important;
line-height: @print-line-height !important;
text-shadow: none !important;
box-shadow: none !important;
}
最后在 @media print 根节点应用：
@media print {
body {
.print-reset();
}
a {
color: @print-text-color !important;
text-decoration: none;
}
a[href]:after {
content: " (" attr(href) ") ";
word-break: break-all;
}
}
实际打印前必须验证的三件事
预览 ≠ 实打。Chrome 的「打印预览」关掉「背景图形」后，你的 background: white !important 就完全无效；而真机打印时，某些驱动会把 A4 当成 Letter 自动缩放，导致表格列被挤变形。
务必手动确认：
- 打开 Chrome 打印预览 → 点右上角「更多设置」→ ✅ 勾选「背景图形」✅ 关闭「页眉页脚」✅ 设置纸张为 A4
- 用真实打印机走一次纸，重点看跨页表格表头是否重复（需靠
thead { display: table-header-group; }）、长图是否被截断（需img { page-break-inside: avoid; }） - 检查动态内容：JS 插入的
.n-loading、.n-empty、弹窗遮罩层，这些在 DOM 里存在但无对应打印隐藏规则，就会白纸留黑块
最麻烦的永远不是写样式，而是定位哪个元素没被 hide —— 建议打印前先在 DevTools 里手动加 style="display:none" 逐个排除。
