根本原因是打印引擎不支持flex/grid布局，必须降级为block流+显式margin分页；需用break-inside: avoid防跨页断裂、pt/mm单位保尺寸、@media print独立外链确保生效。
HTML卡片排版直接打印会错位、截断、跨页撕裂，根本原因是卡片依赖flex/grid/float等屏幕流式布局，而打印引擎按物理纸张建模——必须重置为块级流+显式分页控制。
为什么卡片在打印里“不听使唤”
浏览器打印预览中，display: flex 或 display: grid 容器里的卡片常被强制换行、宽度塌缩、阴影/圆角消失，甚至整张卡片被切到第二页中间。这不是 bug，是规范行为：打印上下文不支持弹性尺寸计算，也不解析现代布局的断点逻辑。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 卡片容器（如
.card-grid）必须降级为display: block，子卡片设display: block; width: 100%; - 禁止用
gap、justify-content等属性；改用margin-bottom控制垂直间距 -
box-shadow、border-radius在多数打印机驱动中被忽略或渲染为灰阶，应通过@media print显式设为none - 如果卡片含图片，需加
max-width: 100%; height: auto;，否则可能撑破 A4 宽度
@media print 必须外链且独立声明
把 @media print 写在主 CSS 文件里，或混在 @media screen 后面，会导致工业级打印机（如 Zebra、HP LaserJet）或 PDF 转换工具（如 wkhtmltopdf）只读取第一个媒体查询块，后续规则全失效。
- 新建
print-cards.css，仅含打印专用规则，用<link rel="stylesheet" href="print-cards.css" media="print">引入 -
media值大小写敏感，写成PRINT或screen,print都不会生效 - 不要写
* { margin: 0; }—— 会清空<table> 默认边距，导致边框粘连<li>关键重置样式示例：<pre class='brush:php;toolbar:false;'>@media print { .card-grid { display: block; } .card { display: block; width: 100%; margin-bottom: 12pt; break-inside: avoid; } .card img { max-width: 100%; height: auto; } .card * { box-shadow: none !important; border-radius: 0 !important; } }</pre></li> <h3>卡片内容跨页断裂怎么防</h3> <p>单张卡片被切成两页，最常见于含标题+多段文字+底部按钮的结构。浏览器默认把 <code><div class="card"> 当作普通流内块，不保证原子性。<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>break-inside: avoid;（注意不是page-break-inside: avoid，后者在 Chrome 120+ 已废弃） - 若卡片内有
<h3></h3>+<p></p>+<ul></ul>组合，再加orphans: 3; widows: 3;防止段落孤悬 - 避免在卡片内用
position: absolute或float—— 打印引擎无法定位这些脱离文档流的元素 - 调试时用 Chrome DevTools → Rendering → Emulate CSS media: print，比反复 Ctrl+P 快得多
打印按钮触发前要做的 DOM 隔离
直接调 window.print() 会把导航栏、页脚、JS 动态插入的水印全打出来，卡片反而被挤到角落。
- 用
data-print="card"显式标记可打印区域，比class="no-print"更安全（避免和 UI 框架冲突） - 点击打印按钮时，临时替换
document.body.innerHTML为该卡片区域的outerHTML，打印完再恢复（参考电子面单方案） - 如果卡片来自 React/Vue，确保打印前已执行
flushSync或nextTick，防止 DOM 还未更新就截图 - 移动端 Safari 不支持
window.print()，得 fallback 到生成 PDF（如用 jsPDF + html2canvas），但要注意 canvas 渲染 SVG 条码会失真
真正卡住人的不是“怎么让卡片显示”，而是“怎么让每张卡片稳稳落在一页上、不被拆开、不缩放变形”。单位用 pt 或 mm，布局用块流，分页靠 break-inside 和 orphans/widows，这三者缺一不可。
