网页打印精准控制技巧分享

在为小型热敏标签打印机（如Brother 62mm × 52mm 标签）开发网页打印功能时，开发者常面临一个典型难题：尽管已用 .no-print 类隐藏非目标内容，但实际打印仍输出多页——尤其当使用 jQuery Mobile 等框架时，页面结构复杂、默认样式干扰强，导致 .page 容器虽“可见”，却因其他元素未被彻底“脱离文档流”而持续占据分页空间。

根本原因在于：仅设置 visibility: hidden 或 display: none 在部分浏览器（尤其是移动端 WebKit 内核）中，无法完全消除元素对页面盒模型和分页计算的影响。例如，visibility: hidden 保留元素占位，display: none 虽移除渲染，但在某些打印引擎中仍可能因父容器或伪元素残留触发额外分页。

✅ 正确做法是采用多重隐藏策略，确保非打印区域从布局、渲染、分页三个维度彻底“消失”：

@media print {
  /* 彻底移除所有非打印元素及其子元素 */
  .no-print, .no-print * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;      /* 关键补充：强制透明且不参与渲染计算 */
    position: absolute !important;
    left: -9999px !important;  /* 双保险：绝对定位移出视口 */
  }

  /* 重置 body，仅保留打印区域 */
  body * {
    visibility: hidden;
  }

  /* 使目标区域可见并精确适配 */
  .page, .page * {
    visibility: visible;
  }

  .page {
    position: relative;        /* 避免 transform 导致的定位异常 */
    width: 52mm;               /* 注意：旋转后宽高互换，原标签高=52mm → 宽 */
    height: 62mm;              /* 原标签宽=62mm → 高 */
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    /* 若需横排文字旋转，请谨慎使用 transform */
    /* transform: rotate(270deg); → 更推荐用 writing-mode: vertical-rl; 替代 */
  }

  /* 强制单页输出 */
  @page {
    size: 62mm 52mm;
    margin: 0;
  }
  .page {
    page-break-before: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
  }
}

? 关键注意事项：

• 勿滥用 transform: rotate()：CSS transform 会创建新的层叠上下文，在打印时易引发尺寸计算偏差与分页错乱。建议改用 writing-mode: vertical-rl; 实现竖排文字，或直接调整容器宽高+文本 text-align/line-height 控制布局。
• 移除所有外部干扰样式：jQuery Mobile 默认为 data-role="content" 等元素添加内边距、外边距及最小高度，务必在 @media print 中显式重置：

  [data-role="content"] {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

• HTML 结构精简：确保 .page 是 下的直系子元素，或至少无嵌套的 .no-print 父容器，否则隐藏规则可能被继承中断。
• 测试验证方式：在 Chrome DevTools → Print Preview 中勾选 “More settings” → 关闭 “Headers and footers”，观察是否仍存在空白页；若仍有问题，逐个禁用 .no-print 元素，定位残留占位源。

✅ 最终效果：仅