纯HTML+CSS无法生成可扫码条形码，必须用JsBarcode等JS库生成SVG，并通过@media print精确控制物理尺寸、页边距和定位，确保毫米级对齐。
纯 HTML + CSS 不能打印出可扫码的条形码，因为浏览器不解析条码字符集（如 CODE128），只当普通文本渲染。必须用 JS 库生成 SVG 图形，再配合精确的打印样式控制物理尺寸和留白，否则扫码枪或手机扫出来就是“无效格式”或直接失败。
JsBarcode 生成 SVG 条码时 width/height 不生效？
常见现象：调用 JsBarcode("#barcode", "123456789012", {width: 2, height: 80}) 后条码又细又高，或完全不可见。
-
<svg id="barcode"></svg>默认宽高为 0，必须在 CSS 或内联样式中显式设width和height（推荐用 mm 单位，如width: 58mm） - 不要依赖
transform: scale()缩放 SVG，会破坏模块等宽性，扫码器拒识 - 检查生成的 SVG 是否含
<path d="M...">—— 若是大量<rect>，说明库 fallback 到低精度模式，换回JsBarcode@3.11.5或确认 format 参数正确 - 确保 DOM 已就绪再调用：别在
<head>里执行，放在<body>底部或DOMContentLoaded回调里
@media print 样式里必须写的三件事
浏览器打印默认加页眉、页脚、1cm 边距，热敏标签纸一打就错位，扫码区域被裁掉。
- 强制清空页边距：
@media print { @page { margin: 0; size: 58mm 30mm; } }（按实际纸宽调整） - 禁用 body 默认留白：
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } - 条码容器用绝对定位并设物理偏移：
#barcode { position: absolute; top: 2mm; left: 2mm; width: 54mm; height: 18mm; }
printJS 打印后条码模糊或错位？
不是 JS 画得不好，而是打印上下文没隔离干净。
立即学习“前端免费学习笔记（深入）”；
- 务必加
scanStyles: false参数，否则printJS会重复注入样式，导致尺寸叠加变形 - 避免用
window.print()直接打整页 —— 它会把地址栏、页脚、外部 CSS 全塞进去，且不支持@page精确控制 - 如果页面有 Vue/React 组件，确保条码 DOM 在打印前已完全挂载并完成渲染，可加
setTimeout(..., 10)微延迟保险 - 测试时别信 DevTools 打印预览，一定要用系统原生打印对话框 + 实际打印机出纸验证
最容易被忽略的不是“怎么画码”，而是“纸张对齐”——哪怕 SVG 完全合规，只要内容没顶格、没按物理毫米精确定位，扫码率就断崖下跌。热敏打印机没有“像素”概念，只有真实毫米，所有尺寸必须用 mm 或 pt，别碰 px。
