HTML本身不能生成条形码，需依赖JavaScript库（如JsBarcode）或后端服务；前端用JsBarcode可渲染SVG/Canvas，但CSS模拟因无校验、不抗缩放而不可扫码。
HTML里不能直接生成条形码，得靠JavaScript库或后端渲染
HTML本身是标记语言，没有绘图能力， 也只是容器。所谓“HTML生成条形码”，实际是用JS在浏览器里画出条形码图形，或通过API请求服务端返回图片。硬写SVG路径或CSS模拟虽然可行，但不抗缩放、不兼容扫码设备，基本不可用。
- 扫码设备（如微信扫一扫、超市扫码枪）只认符合ISO/IEC 16022等标准的栅格化图像，CSS伪元素拼出来的“条形码”扫不出来
- 纯前端方案推荐用
jsbarcode或qrcode.js（注意：后者是二维码，不是条形码）；JsBarcode支持EAN-13、CODE128、ITF-14等主流一维码 - 若需服务端生成（比如防止JS被禁用、统一管理码规则），用 Python 的
python-barcode或 Node.js 的bwip-js更稳妥，前端只负责
用 JsBarcode 在页面上画 CODE128 条形码（最常用场景）
JsBarcode 是目前最轻量、兼容性最好的前端条形码库，支持直接写入 、 或生成 Data URL。它不依赖 jQuery，ESM/CJS 都支持。
- 引入方式：
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>（注意版本号，v4+ 已移除对 IE 的支持） - 目标元素必须有
data-value属性或传入明确值，否则会静默失败，控制台无报错 - 常见错误：
JsBarcode("#mydiv", "123");执行后没反应？检查 #mydiv 是否已存在 DOM 中（别在里调用）、是否设置了宽高（svg默认宽高为 0） - 示例代码：
<div id="barcode"></div>
<script>
JsBarcode("#barcode", "0123456789012", {
format: "CODE128",
displayValue: true,
fontSize: 14,
margin: 10,
width: 2,
height: 80
});
</script>
为什么不用 CSS + div 模拟条形码？
有人尝试用多个 拼出黑白条——这在视觉上像，但实际无效。
- 像素级宽度控制受屏幕缩放、subpixel rendering 影响，条宽误差超过 ±0.1mm 就可能被扫码器拒识
- 打印时 CSS 布局常被重排，
zoom或@media print下条宽崩坏，导致条码无法扫描 - 没有校验位计算（如 EAN-13 最后一位是模 10 校验和），手动拼的“码”即使看起来对，扫码器也会返回“Invalid checksum”
-
JsBarcode内置了所有标准的编码逻辑和校验算法，比如输入"123456789012"，它自动补全第13位并生成对应条纹序列
导出 PNG 时模糊？Canvas 渲染分辨率不够
用 JsBarcode 渲染到 后调用 toDataURL("image/png") 导出，常出现锯齿或模糊——本质是 canvas 像素密度没适配设备 dpr。
- 解决方法：手动设置 canvas 的
width/height属性（非 CSS 宽高），并乘以window.devicePixelRatio - 不要写：
canvas.style.width = "300px"; canvas.style.height = "100px";—— 这只会拉伸画布，不提升精度 - 正确做法：
const canvas = document.getElementById("mycanvas");
const dpr = window.devicePixelRatio || 1;
canvas.width = 300 * dpr;
canvas.height = 100 * dpr;
canvas.style.width = "300px";
canvas.style.height = "100px";
// 然后再调用 JsBarcode(canvas, ...)
这个细节漏掉，导出的 PNG 在 Retina 屏或打印时基本扫不出。很多项目卡在这里一周都找不到原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
