HTML怎么做小票打印_html小票收据打印实现方法大全

作者：袖梨 2026-06-27

小票打印需解决浏览器默认样式、分页控制、纸宽适配、空白页/截断、字体嵌入缺失五大问题；须用@media print重置样式、禁用背景与flex、显式设宽高、用等宽字体并关闭抗锯齿。

小票打印不是简单地把 HTML 丢给 window.print() 就能出效果的，核心问题在于：浏览器默认样式、分页控制、物理打印机纸宽适配、空白页/截断、字体嵌入缺失——这五点不处理，打出来大概率是错位、多页、字被切、字号发虚。

浏览器打印视图会继承页面 CSS，但小票纸宽通常只有 58mm 或 80mm（对应 CSS 中约 width: 384px 或 576px），而默认 body margin、font-size、line-height 全都不适配。不重置就会留白边、文字挤成一团或换行错乱。

实操建议：

在 <style> 中写 @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

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: avoid !important; }
给小票最外层容器设 height: fit-content（兼容性差）或更稳妥的 min-height: 100vh 配合 overflow: visible
关键字段如金额、时间，用 white-space: nowrap 防止被断在两行（例如 ¥199.00 被切成 ¥199. 和 00）
测试时用 Chrome 的「打印预览 → 更多设置 → 取消勾选“背景图形”和“页眉页脚”」，这两项一开就毁版式

热敏打印机 DPI 低（常见 203dpi），自定义 Web 字体（如 WOFF）几乎必然发虚、笔画粘连；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，避免缩放干扰