@media print 是唯一生效入口，必须独立包裹所有打印样式，优先级需高于屏幕样式；禁用rem/%字号，强制用pt/mm单位及系统安全字体；表格须设thead/tfoot为table-header-group/footer-group并避免跨页断裂。
@media print 是唯一生效入口，不加它就等于没做打印适配。 直接调用 window.print() 打出来的内容混乱、文字发虚、表格劈成两半——这不是浏览器问题，是你没把打印当成独立渲染通道来对待。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
为什么 @media print 必须独立写、且优先级要压过屏幕样式
常见错误是把打印规则混在主 CSS 末尾，结果被 .container { width: 1200px; } 这类通用规则覆盖；更糟的是用多个 <link> 分散加载，部分规则根本没进渲染树。
- 所有打印专用样式必须包裹在
@media print { }内，不能只靠.print-only类控制显隐 - 推荐用外部文件 +
<link rel="stylesheet" media="print" href="print.css">，比内联@media print更早介入渲染流程 - 避免写
* { margin: 0; }这类宽泛重置，容易误杀<table> 或 <code><pre class="brush:php;toolbar:false;"></pre>的关键结构 - 页面含
<iframe></iframe>？父页的@media print不会穿透生效，需提前提取内容或单独重置其样式 - 正文字体栈强制用系统安全字体：
font-family: "Microsoft YaHei", SimSun, sans-serif; - 字号统一用
pt（如12pt）或mm（如4.2mm），禁用em、rem、% - 禁用
@font-face在打印时加载，哪怕已声明font-display: block，也建议在@media print中直接降级 -
<pre class="brush:php;toolbar:false;"></pre>和<code>块必须指定等宽字体：font-family: "Courier New", monospace; - 加
color-adjust: exact; -webkit-print-color-adjust: exact;强制打印背景色和图片（但注意兼容性） - 显式声明
thead { display: table-header-group; }和tfoot { display: table-footer-group; }，别依赖浏览器自动处理 - 表格宽度设为
width: 100% !important;，禁用max-width或固定像素值 - 边框用
border-collapse: collapse;，避免双线叠加导致打印错位 - 对长表格，可加
.new-page-after-table { page-break-after: always; }强制分页
字体、单位、颜色怎么设才不糊、不缩放失真
中文打印最常崩在字体上：用了 @font-face 的 Web Font，预览时变方块；字号用 rem 或 %，不同浏览器换算出的物理尺寸差一大截。
表格和分页怎么避免被硬生生劈开
表格跨页断裂是最影响专业感的问题——<thead> 只在第一页显示，第二页开头只剩孤零零的 <code><tr>，而且浏览器默认不会重复表头。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>给 <code><tr> 加 <code>page-break-inside: avoid; 防止单行被切开
调试必须用浏览器打印预览，别等真连打印机
90% 的问题靠预览就能暴露，但很多人跳过这步，直到打出一张全是空白页或半截表格。Chrome / Edge 开发者工具里点「更多工具 → 渲染面板 → 模拟 CSS 媒体类型 → print」，能实时看到效果；Firefox 则在打印预览界面按 Ctrl+Shift+M 进入响应式设计模式并切换到 print。
最容易被忽略的是：旧版 Edge 对 position: fixed 元素会在每页重复打印，造成文字堆叠；稳妥做法是统一设为 position: static !important。还有就是 a[href]:after 规则若没加 !important，可能被其他链接样式覆盖，导致 URL 不显示。
