@media print是工业级打印唯一入口，必须外链加载、用pt/mm单位、显式声明thead为table-header-group、禁用Web Font，并确保@page与@media print平级。
工业级打印设备对接时，HTML 排版必须绕过浏览器默认渲染逻辑，直接按物理纸张建模——@media print 不是可选项，而是唯一入口；所有样式必须用 pt、mm 或 in 单位，禁用 rem、px、%；表格跨页断裂、字体发虚、页边距漂移，90% 以上都源于没把打印当作独立输出通道来对待。
为什么 @media print 必须外链且单独加载
工业场景下常需对接多品牌打印机（如 Zebra、Brother、HP LaserJet），它们的打印引擎对 CSS 解析差异极大。内联或混写在主 CSS 中的 @media print 规则，在 Chrome 124+ 和 Edge 125 中可能被缓存忽略，Firefox 则要求刷新预览才重载。
- 必须用
<link rel="stylesheet" href="print-industrial.css" media="print">，media值大小写敏感，写成PRINT或screen,print都会失效 - 避免在同一个 CSS 文件里穿插
@media screen和@media print—— 某些嵌入式打印服务（如 CUPS + wkhtmltopdf）只识别首个媒体查询块 - 外链文件应放在
<head>最前位置，确保 DOM 渲染前就介入，否则动态组件（如 React 表格）可能已挂载但未受控
table 跨页断裂的硬性修复条件
工业单据（如质检报告、装箱单）含长表格时，浏览器默认将 tr 当作普通流内元素切分，导致表头丢失、行数据孤悬第二页——这不是 bug，是规范行为，必须显式干预。
- 给
table加page-break-inside: avoid;，而非仅作用于tr（旧版 IE/Edge 115- 不支持tr级别断点） -
thead必须声明display: table-header-group;，否则跨页时不会重复渲染 - 若表格含
colgroup或col，需同步设width为固定值（如width: 80pt;），百分比宽度在打印上下文中无物理意义 - 横向打印？加
@page { size: landscape; }，并确保容器max-width: none;，否则 A4 纵向宽度会截断内容
字体与单位为何必须用 pt 和系统安全栈
工业环境常见高 DPI 打印机（如 600dpi Zebra ZT410），px 在不同缩放因子下换算失真严重；Web Font 在离线打印或嵌入式 WebKit 引擎中几乎必然回退为 Times New Roman，中文直接变方块。
立即学习“前端免费学习笔记（深入）”；
- 正文字体栈强制为：
font-family: "Microsoft YaHei", SimSun, sans-serif; - 字号统一用
12pt（≈16px 屏幕尺寸）、10.5pt（小号说明文字），禁用em、rem、% -
pre和code块必须指定等宽字体：font-family: "Courier New", monospace; - 禁用
@font-face在@media print中加载——哪怕已声明font-display: swap，也应在该媒体查询内直接降级
data-print="true" 比 class="no-print" 更可靠的原因
工业系统常集成 Ant Design、Element Plus 或自研 UI 组件库，这些框架自带 .no-print 类名，容易误删弹窗遮罩层或操作按钮，导致打印区域提取失败。
- 用
<main data-print="true">显式标记内容主体，JS 提取时写document.querySelector('[data-print="true"]')，不匹配模糊值[data-print] - 配套 CSS 写法：
@media print { * { display: none; } [data-print="true"] { display: block; } } - 若页面含
iframe（如实时监控图表），父页@media print不穿透，必须单独为 iframe 内容注入样式或提前提取 DOM 片段 - 避免对父容器设
display: none后再尝试显示子元素——打印引擎会跳过整个节点树，子元素无法绕过
工业级对接最易被忽略的点：不是样式写得不够多，而是没确认 @page 和 @media print 是否平级存在；@page 写在 @media print 里面等于没写，它控制的是纸张物理属性，不是内容样式。
