使用window.print()打印2.5cm条码标签时预览失败求助

问题描述 #

使用window.print()打印条码标签时，设置2.5cm自定义页面尺寸会触发“print preview failed”提示，4cm及以上尺寸打印正常，已在纯HTML文件中排除Next.js环境影响。

可能原因 #

浏览器或打印机对打印纸张有最小尺寸限制，2.5cm可能低于该阈值。

解决方案 #

• 明确页面宽高：修改@page规则，同时指定宽和高（适配窄长标签场景），避免浏览器默认按正方形处理触发限制：

@page {
  margin: 0;
  size: 2.5cm 5cm; /* 示例：宽2.5cm，高5cm，可根据实际标签尺寸调整 */
}

• 适配打印内容：添加打印媒体查询，确保内容完全适配小尺寸，避免溢出导致预览失败：

@media print {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body, .print-content {
    width: 2.5cm;
    font-size: 7px; /* 根据内容调整字体大小，保证能完整显示 */
  }
}

• 检查浏览器打印设置：部分浏览器（如Chrome）需在打印预览的「更多设置」中，将「纸张尺寸」选为「自定义」，手动输入目标尺寸，而非仅依赖CSS的@page规则。
• 验证打印机支持性：确认所用物理打印机支持2.5cm尺寸的纸张，部分打印机存在硬件层面的最小纸张限制。

调整后的测试代码示例 #

<div class="print-content">
  <h1>Print me</h1>
</div>
<input type="button" onclick="window.print()" value="print" />

<style>
@page {
  margin: 0;
  size: 2.5cm 5cm;
}

@media print {
  * {
    margin: 0;
    padding: 0;
  }
  .print-content {
    width: 2.5cm;
    font-size: 7px;
  }
}
</style>

<script>
function printDiv() {
  window.print();
}
</script>

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