JsBarcode可直接生成合规可扫描的EAN-13条形码，自动计算校验位、处理字符集映射及二进制编码，仅需引入库、准备SVG容器、调用JsBarcode("#barcode","690123456789",{format:"EAN13"})三步即可。
直接用 JsBarcode 就能生成合规、可扫描的 EAN-13 条形码，不需要自己算校验位、拼二进制、画 SVG —— 它内部已完整实现 ISO/IEC 15420 标准，包括前置码映射、左右侧字符集（A/B/C）、中间分隔符 01010、起始/终止符 101 和校验码自动补全。
JsBarcode 生成 EAN-13 的最小可行写法
只需三步：引入库、准备容器、调用初始化。不依赖 jQuery，原生 DOM 即可。
- 确保目标元素是空的
<svg>或<canvas>（推荐<svg>，缩放无损、打印清晰） -
text参数必须是 12 位纯数字字符串（JsBarcode会自动计算并追加第 13 位校验码） - 若传入 13 位字符串，它会先验证校验位；错误则抛出
Error: Invalid check digit
<svg id="barcode"></svg>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script>
JsBarcode("#barcode", "690123456789", {
format: "EAN13",
displayValue: true,
fontSize: 16,
textMargin: 10
});
</script>
EAN-13 校验码不是“随便加个数”，JsBarcode 怎么算的
它严格按 EAN 规范执行：从右往左编号（校验位为第 1 位），对所有偶数位（即第 2、4、6…12 位）数字求和 ×3，加上奇数位（第 3、5…11 位）之和，结果对 10 取模；若余数非 0，则用 10 减该余数得到校验码。例如 "690123456789" → 偶数位和 = 9+0+2+4+6+8 = 29 → ×3 = 87；奇数位和 = 6+1+3+5+7+9 = 31；总和 = 118 → 118 % 10 = 8 → 校验码 = 10 − 8 = 2 → 最终为 "6901234567892"。
- 手动传入 13 位时，如
"6901234567891"（末位错），JsBarcode会立即报错，不会静默渲染错误条码 - 不建议自行实现校验逻辑——EAN-13 前缀（如 690~695）还影响左侧 6 位的字符集编码方式（A/B 混合），漏掉这点会导致扫码器拒识
为什么不用 canvas 或 div 模拟？
用 <div> 手动拼色块或用 <canvas> 逐像素画线，看似可控，实则极易踩坑：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 模块宽度（module width）必须为整数像素，否则抗锯齿会导致条宽失真，商用扫码枪无法识别
- 起始符
101、中间分隔符01010、终止符101必须严格对齐，任意偏移 0.5px 都可能让扫码器丢失同步 - 供人识别字符（下方数字）需使用 OCR-B 字体，且与条码底部间距 ≥0.5 模块宽，否则违反 GS1 规范，部分零售系统拒收
-
JsBarcode输出的 SVG 内部每个<rect>宽度都是整数、无 stroke、无 transform，天然满足这些要求
服务端生成 vs 前端生成怎么选
如果条码用于订单页、电子发票等关键场景，优先走服务端生成（如 Python python-barcode + HTTP 接口）：
- 避免用户禁用 JS 导致页面空白
- 统一管控条码规则（如强制前缀、禁止自定义校验位、添加水印）
- 规避前端时间戳/随机数导致的重复码风险（尤其流水号场景）
- 但开发成本高：需部署、鉴权、缓存、防刷；而
JsBarcode零部署，适合后台管理页、内部工具、原型验证
真正容易被忽略的是：EAN-13 的“左侧第一位”决定整个左半区编码策略，这个逻辑藏在 JsBarcode 的 ean13.js 里，不暴露 API；你传进去的字符串哪怕只是少一位、多一位、含字母，它都会立刻 fail fast —— 别试图绕过校验去“兼容脏数据”。
