使用PrintJS打印收据时自定义高度不生效始终为A4尺寸如何解决

问题根因 #

• 你写的@page的size参数存在笔误：80m 80m是无效单位，浏览器会直接忽略该配置， fallback 到默认A4尺寸
• 固定写死height:80mm的规则无法适配动态长度的收据内容，且浏览器对固定高度的打印样式优先级低于打印机默认纸张配置
• 没有开启打印内容结束后自动分页/截断的规则

修复后的代码 #

printJS({
  printable: "printable",
  type: "html",
  targetStyles: "*",
  style: `
    @page { 
      margin: 0mm; 
      size: 80mm auto; /* 宽度固定80mm，高度自适应内容长度 */
    }
    @media print { 
      body { 
        margin: 0mm; 
        width: 80mm; 
        height: fit-content; /* 高度随内容自动调整 */
      }
      /* 强制打印结束后截断纸张，适配热敏打印机 */
      #printable:last-child {
        page-break-after: always;
      }
    }`,
});

额外配置验证 #

• 打印弹出框中选择对应热敏打印机后，确认纸张尺寸选择为80mm卷纸/自定义尺寸，不要选A4
• 开启打印机的自动切纸功能，部分打印机需要在驱动设置里手动开启该选项
• 如果依然不生效，可以给待打印的最外层元素添加overflow: hidden;属性，避免内容溢出撑开多余空白

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