HTML小票收据打印实现方法大全

小票打印这件事，看起来简单，实际操作中却隐藏着不少陷阱。表面上只是调用 window.print()，但真正打印出来时，经常出现错位、多余页面、文字被裁剪、字迹越打越模糊等问题。问题根源在哪里？我归纳出五个核心要点：浏览器默认样式、分页控制、物理打印机纸宽适配、空白页与截断、字体嵌入缺失——这五个方面如果不处理好，后续所有工作都是徒劳。

用 @media print 强制重置所有样式

浏览器打印视图会继承页面CSS，但小票纸张宽度通常只有58mm或80mm，换算成CSS大约为 width: 384px 或 576px。而默认的body margin、font-size、line-height都不是为此场景设计的。如果不重置，结果就是留白过多、文字拥挤、换行混乱。具体实操建议如下：

• 在 中添加 @media print { * { margin: 0; padding: 0; font-size: 12px; line-height: 1.4; }，全局清空后再重新构建样式
• 必须显式设置 body { width: 384px; margin: 0 auto; }（具体像素宽度根据热敏打印机实际宽度调整）
• 禁用所有背景色和图片：* { background: transparent !important; }。热敏打印机不支持彩色或灰度，保留背景不仅无用，还会浪费碳带
• 布局方面，避免使用 flex 或 grid——部分旧款驱动无法正确识别。推荐使用 display: table 或纯 div + float，更稳定可靠

window.print() 前必须调用 focus() 并隐藏非打印元素

一个常见的坑是：Chrome和Edge在iframe或弹出窗口中调用 window.print() 时，如果窗口未获得焦点，可能会静默失败，或弹出空对话框。而Safari对 display: none 元素的打印支持也不稳定。具体实操建议如下：

• 打印前先执行 window.focus();，确保当前窗口处于激活状态
• 使用class控制显示状态，例如给小票容器添加 class="receipt"，其他区域添加 class="no-print"
• 在 @media print 中写 .no-print { display: none !important; }，这种写法比内联 style="display:none" 更可靠
• 不要依赖 visibility: hidden——它虽然不可见，但依然占据布局空间，容易导致分页错位

解决热敏打印机自动换行/截断的关键：禁用分页与固定高度

小票内容长度不确定，但热敏打印机有一个硬性要求：必须“一单一页”。既不能因为 page-break-after: always 多出空白页，也不能让内容撑开导致第二页只打印半行。具体实操建议如下：

• 在 @media print 中强制关闭分页：html, body { height: auto !important; page-break-after: a void !important; }
• 给小票最外层容器设置 height: fit-content（兼容性一般）或更稳妥的 min-height: 100vh 配合 overflow: visible
• 对金额、时间等关键字段，使用 white-space: nowrap 防止被断在两行——例如 199.00 被切成 199. 和 00，这种低级错误应避免
• 测试时，在Chrome的「打印预览 → 更多设置」中，取消勾选“背景图形”和“页眉页脚”，否则版式会被破坏

字体模糊？必须用系统内置等宽字体 + font-smoothing 降级

热敏打印机的DPI很低（常见203dpi），像WOFF这类自定义Web字体，打印出来几乎必然发虚、笔画粘连。更麻烦的是，iOS Safari会直接忽略 font-smoothing 设置。具体实操建议如下：

• 只使用系统安全字体栈：font-family: "Courier New", monospace;。等宽且无衬线，字符对齐最稳定
• 添加 -webkit-font-smoothing: none; 和 -moz-osx-font-smoothing: grayscale;，关闭抗锯齿——热敏纸不需要此效果
• 避免使用 font-weight: bold。大多数热敏打印机通过加粗算法模拟，容易糊成黑块。改用双字符或 text-shadow: 1px 0 #000 模拟效果更好
• 字号统一使用 px（例如 12px），不要用 rem 或 em，以免缩放带来干扰

说到底，真正困难的不是写出能打印的HTML，而是同一份代码在Windows Chrome、macOS Safari、安卓WebView中都能打出一致的小票。驱动差异、DPI解析、CSS支持度各不相同。每次更换打印机型号，至少需要重新测试三遍：空白页、金额对齐、末行是否被裁掉——一个都不能少。