不能。浏览器不支持条码字符集，需将数据转为矢量svg图形（如jsbarcode生成）并用printjs调用打印，配合精确的@media print样式控制尺寸、页边距和对齐，确保工业级扫码识别率。
用纯 HTML + CSS 能不能直接打印条码？
不能。浏览器不识别条码字符集（如 Code128、EAN-13），<span>123456789012</span> 渲染出来就是普通数字，扫不出来。必须把数据转成条码图形——要么用 JS 库动态生成 SVG/PNG，要么后端生成图片再嵌入。
前端生成条码最轻量的方案：用 jsbarcode + printJS
适合单页应用、小批量标签（比如仓库临时打 5 张）、不依赖后端的场景。注意：JsBarcode 只负责画码，printJS 负责调浏览器打印（避免 window.print() 把页眉页脚/URL 也打出来）。
- 引入方式：
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>和<script src="https://cdn.jsdelivr.net/npm/print-js@1.6.0/dist/print.min.js"></script> - 给
<svg id="barcode"></svg>调用：JsBarcode("#barcode", "123456789012", {format: "CODE128", displayValue: false}); - 打印前加样式控制尺寸和留白：
@media print { body { margin: 0; } #barcode { width: 200px; height: 80px; } } - 触发打印：
printJS({printable: 'barcode', type: 'html', scanStyles: false});（scanStyles: false防止重复注入样式导致错位）
为什么不用 Canvas 或 PNG？
Canvas 渲染的条码在高 DPI 打印机（如 Zebra、Brother 热敏机）上容易模糊、宽窄比失真，扫码枪识别率骤降；PNG 虽清晰但需额外 base64 编码或请求，且缩放时边缘锯齿。SVG 是矢量，任意缩放无损，JsBarcode 默认输出 SVG，直接适配打印机物理 DPI。
- 别手动设
width/height属性——改用xml:space="preserve"和 viewBox 控制比例 - 热敏打印机常见宽度是 58mm 或 80mm，对应 CSS 中建议用
max-width: 58mm而非像素值 - 如果扫码失败，先检查生成的 SVG 是否含
<path d="M..."></path>路径，而不是一堆<rect></rect>（旧版库可能 fallback 到 rect，精度差）
实际打标时最容易被忽略的点
不是条码生不生成，而是「纸张对齐」和「内容裁切」。浏览器打印默认有 1cm 以上页边距，而条码标签常需顶格打印。
- 必须加打印样式：
@media print { @page { margin: 0; size: 58mm 30mm; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } } - 标签内容要绝对定位，例如
position: absolute; top: 2mm; left: 2mm;，别依赖流式布局 - ZPL 打印机（如 Zebra）根本不用走浏览器——直接发 ZPL 指令更稳，这时 HTML 方案就该让位给后端服务（如 Node.js 调
node-zpl） - 测试阶段务必用真机扫，微信扫码、支付宝扫码对低对比度条码容忍度高，但工业扫码枪（如 Honeywell Xenon）要求黑白反差 ≥ 70%，SVG 填色别用
#000001这种近黑灰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
