纯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..."></path> —— 若是大量 <rect></rect>，说明库 fallback 到低精度模式，换回 JsBarcode@3.11.5 或确认 format 参数正确
• 确保 DOM 已就绪再调用：别在 里执行，放在 底部或 DOMContentLoaded 回调里

@media print 样式里必须写的三件事

浏览器打印默认加页眉、页脚、1cm 边距，热敏标签纸一打就错位，扫码区域被裁掉。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 强制清空页边距：@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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！