JsBarcode是目前最稳最省事的条形码生成方案，它自动处理校验码、子集选择、起始终止符，仅需传原始字符串即可输出SVG，无需字体、不依赖后端、兼容所有扫码设备。
直接用 JsBarcode 是目前最稳、最省事的方案，不用自己算校验码、不用装字体、不依赖后端，浏览器里一跑就出 SVG 条码。
为什么别用 code128.ttf 字体方案
字体方案看着简单，但实际踩坑率极高：它要求你手动把原始文本转成“中间码”（比如 "12" 要变成字符 0x40），稍有偏差扫码枪就认不出来；而且不同字体文件对子集 A/B/C 的映射不一致，code128.ttf 和 Free 3 of 9 混用会导致条码完全失效；Windows/macOS 字体缓存机制还会让修改后预览不刷新。
常见错误现象包括：
- 条码扫出来是乱码或空值
- 同一串数字在 Excel 里能扫，网页里扫不出
- 偶数位数字正常，奇数位（如
"123"）直接崩溃或补零逻辑错乱
JsBarcode 生成 CODE128 的实操要点
JsBarcode 内部自动选子集、算校验和、加起始/终止符，你只管传原始字符串。但要注意几个关键参数：
立即学习“前端免费学习笔记（深入）”；
-
format: "CODE128"必须大写，小写"code128"会 fallback 到默认格式（通常是 CODE39） -
width建议设为2或3，太细（1）易被打印机丢线，太粗（5）导致相邻条粘连 -
height至少50，低于30的条码在低分辨率扫描枪下识别率骤降 - 若要兼容老旧设备，加
text: ""清空底部文字，避免字体渲染干扰解码
示例代码：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
JsBarcode("#barcode-svg", "1234567890", {
format: "CODE128",
width: 2,
height: 80,
text: "",
margin: 5
});
遇到奇数位数字或混合字符怎么办
JsBarcode 默认用子集 B，能处理字母+数字混合（如 "ABC123"）；若纯数字且位数为奇数（如 "123"），它不会自动补零——这是正确行为，因为补零会改变业务含义。你需要自己判断：
- SKU/订单号类字段：保留原样，让
JsBarcode用 B 子集编码（安全但略长） - 纯计量数据（如温度、重量）：前端补零再传，
JsBarcode会自动切到 C 子集压缩，节省 40% 宽度 - 服务端已强制补零的场景：确认前后端补零逻辑一致，否则扫码结果和数据库存值对不上
不要依赖“自动切换子集”的幻想——JsBarcode 只在初始化时选一次子集，不会中途切 A/B/C。
空白区（quiet zone）被忽略的后果
所有扫码枪都依赖左右各一段无内容区域来定位起始/结束。如果 SVG 被 CSS margin 或父容器 padding 挤压，或者导出 PNG 时裁掉了边缘，识别率立刻掉到 60% 以下。
实测建议：
- SVG 外层容器预留至少
20px内边距 - 用
JsBarcode的margin参数（非 CSS）确保条码自身带空白区 - 打印前用 Chrome “打印预览”检查 SVG 是否完整，别信屏幕截图
真正麻烦的从来不是生成条码，而是让每台扫码枪、每台打印机、每个光照环境都稳定读出同一个结果——空白区、X 尺寸、子集选择，这三个点漏掉任何一个，现场调试就要多花两小时。
