ReactToPrint库适配热敏打印机的布局问题求助

核心问题定位 #

你当前设置的固定打印高度4in是导致内容截断的主要原因——热敏纸是连续介质，应该用宽度固定、高度自适应的布局，而非限制死高度。另外原CSS里的逗号语法错误也会导致尺寸规则不生效。

具体优化步骤 #

1. 修正打印页面尺寸与基础样式 #

把固定高度改为auto，让内容自动撑开高度，同时重置打印场景的基础样式，适配窄幅热敏纸：

const handlePrintReceipt = useReactToPrint({
  content: () => contentToPrintReceiptRef.current,
  pageStyle: `@media print {
    @page {
      size: 2.5in auto; /* 宽度固定为2.5英寸，高度随内容自适应 */
      margin: 0.2in; /* 保留小边距，避免内容贴边 */
    }
    * {
      box-sizing: border-box; /* 防止内边距撑宽容器 */
      max-width: 100%; /* 所有元素禁止横向溢出 */
    }
    body {
      margin: 0; /* 重置浏览器默认边距 */
      font-family: monospace; /* 等宽字体更适配热敏打印，避免字体错位 */
      font-size: 12px; /* 缩小字体适配窄幅纸张 */
    }
  }`,
  documentTitle: `Invoice`,
  // 简化依赖检查逻辑
  onBeforeGetContent: () => {
    if (!patient || !bill) throw new Error("缺少打印所需数据");
  },
  onAfterPrint: () => setIsPrintingReceipt(false),
});

注意：原代码中size: 2.5in 4in,末尾的逗号是CSS语法错误，必须删除才能让尺寸规则生效。

2. 优化PrintableReceipt组件内部布局 #

确保组件内容完全适配窄幅纸张：

• 所有容器元素设置width: 100%，禁止固定宽度
• 用flex布局实现左右对齐的条目（如商品名/价格），避免溢出
• 减少不必要的内边距、外边距，采用紧凑布局

示例组件打印样式：

/* 可放在PrintableReceipt组件的CSS中 */
@media print {
  .receipt-wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .receipt-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    line-height: 1.4;
    margin: 3px 0;
  }
  .receipt-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 8px;
  }
}

3. 简化打印触发逻辑 #

去掉冗余的状态等待逻辑，直接在打印前确认数据是否就绪：

// 移除不必要的isPrintingReceipt相关状态与useEffect
const handlePrintReceipt = useReactToPrint({
  content: () => contentToPrintReceiptRef.current,
  pageStyle: /* 上述优化后的CSS */,
  documentTitle: `Invoice`,
  onBeforeGetContent: () => {
    if (!patient || !bill) {
      alert("请确保患者和账单数据已加载完成");
      // 抛出错误终止打印流程
      throw new Error("打印数据不完整");
    }
  },
});

4. 测试与调试技巧 #

• 打印前先通过浏览器打印预览查看效果，确认无横向溢出、内容完整
• 若打印机有固定DPI（如203DPI），可根据DPI换算精确的字体大小（12px≈5mm）
• 避免使用阴影、渐变等复杂CSS特性，热敏打印机对这类样式支持较差

内容的提问来源于stack exchange，提问作者CKW