@media print 未生效主因是浏览器默认禁用背景图形、框架样式覆盖或 @page 规则缺失；需手动开启“背景图形”，将关键信息移至前景，对表格外层设 break-inside: avoid，用 pt 单位确保字体可读，并将打印样式置于全局非 scoped 样式中。
@media print 规则没生效，大概率不是写错了，而是被浏览器默认设置、加载时机或框架注入覆盖了。
为什么打印预览里样式正常，Ctrl+P 却不显示背景色和图片
Chrome 和 Edge 默认关闭「背景图形」选项，哪怕你写了 -webkit-print-color-adjust: exact 和 print-color-adjust: exact，这个开关一关，所有 background-color 和 background-image 都被无视。
- 用户必须手动在打印设置里打开「背景图形」（Print → More settings → Background graphics）
- 你不能用 JS 控制这个开关，它是浏览器级策略
- 所以更稳妥的做法是：把关键信息从背景移到前景，比如用
border或color表达状态，而不是依赖浅色背景块 - 如果非要用背景色，得加双重保障：
background: #fff !important; -webkit-print-color-adjust: exact !important;
table 被截断在两页中间，page-break-inside: avoid 不起作用
部分浏览器（尤其是旧版 Safari 和某些 Electron 内核）对 page-break-inside: avoid 在 <table> 上的支持极差，真正起效的是对 <code><tr> 或包裹容器设规则。
<ul>
<li>优先给表格外层加 class，比如 <code><div class="print-table"><table>...</table></div>，然后写 .print-table { break-inside: avoid; }
<thead> 加 <code>display: table-header-group，这是打印引擎识别表头重复的唯一可靠方式
<table> 上直接设 <code>width: 100% + max-width 混用，打印时宽度计算容易溢出导致强制分页
字体变细、文字模糊，或字号在 A4 上小得看不清
屏幕用的 rem、em 或 px 在打印上下文里会因 DPI 解析异常而缩放失真，pt 才是物理尺寸锚点。
- 正文字体至少用
font-size: 12pt（≈16px 屏幕显示），小于10pt在激光打印后基本不可读 - 禁用
font-weight: lighter或透明度opacity，打印引擎常将其渲染为灰色虚影 - 中文字体优先声明
"SimSun", "Noto Sans CJK SC", serif，避免无衬线字体在小字号下笔画粘连 - 别信
currentColor—— 打印时颜色继承链可能中断，所有文本色显式写成color: #000 !important
Vue/React 项目里 @media print 样式被动态样式覆盖
CSS-in-JS 库（如 styled-components、emotion）或框架组件（如 Element Plus 的 <el-table></el-table>）默认不将样式注入到 print 媒体上下文，它们只管 screen。
- 在 Vue 中，把打印样式写在全局
<style></style>块里，而非<style scoped></style>，否则选择器会被加属性前缀，@media print规则匹配不到 - React 中若用 emotion，需显式传入
media="print"到css函数，或改用<link rel="stylesheet" media="print">引入纯 CSS 文件 - 检查最终渲染的
里是否真有@media print规则；用 DevTools → Computed → 切换媒体为print查看实际生效值 - 警惕第三方 UI 组件自带的
@media print重置（如 Bootstrap），它可能清掉你的自定义样式
最易被忽略的一点：@page 规则必须写在 @media print 外层，且不能嵌套；它不接受选择器，只作用于整页物理输出。很多团队花半天调 break-inside，却忘了加 @page { size: A4; margin: 15mm; }，结果所有努力都在错误的纸张尺寸上运行。
