前端利用js生成普通条形码和EAN商品条形码(69码)
文章目录
由于工作需要,这两天接触了前端生成条形码的一些技术,在此做个笔记,也方便以后有需要的同行可以快速完成开发任务。
普通条形码的生成
环境
- 插件:
JsBarcode
- 依赖:
jquery
步骤
- 引入插件
- 创建
img
标签存储生成的图片 - 通过JS生成条码
使用
- JsBarcode(
selector
,String
,option
)
JsBarcode("#barcode", "5645645341685454", {format: "CODE128", fontSize: 24})
- $(
selector
).JsBarcode(String
,option
)
$("#barcode").JsBarcode("5645645341685454", {format: "CODE128"})
常用配置项
format
: “CODE39” //选择要使用的条形码类型width
:3 //设置条之间的宽度height
:100 //生成图片的高度displayValue
:true //是否在条形码下方显示文字font
:“fantasy” //设置文本的字体textMargin
:5 //设置条形码和文本之间的间距fontSize
:15 //设置文本的大小background
: “#eee” //设置条形码的背景lineColor
:"#2196f3" //设置条和文本的颜色。margin
:15 //设置条形码周围的空白边距
Demo
<!-- JsBarcode是jquery插件,必须先引入jquery再引入JsBarcode -->
<html>
<head>
...
<script src="./common/js/jquery-3.3.1.min.js"></script>
<script src="./common/js/JsBarcode.all.min.js"></script>
...
</head>
<body>
<!-- 创建一个div,里面的img标签就是一会儿要使用生成的条码替换的内容 -->
<div class="barcode-img">
<img src="" alt="条码" id="barcode">
</div>
<script >
$(function() {
// 生成条形码的配置
var options = {
format: "CODE128", // 条码格式
displayValue: true, // 是否显示条码下方的字符串
fontSize: 36, // 显示的字符串的字体
width: 2, // 条码的间隔
height: 100 // 生成的条码的高度
};
// 生成条形码,其中的字符串为要生成的条码的内容
$("#barcode").JsBarcode("123456789", options);
})
</script>
</body>
</html>
EAN商品条形码(商品69码)的生成
商品条形码和普通的条形码有点区别,商品条形码的第一个数字和第二个数字之间是有两条竖线分割的。
因此商品条形码不能用上面的JsBarcode生成
环境
- 插件:
jquery-ean13
- 依赖:
jquery
步骤
- 引入插件
- 创建
canvas
标签存储生成的图片, 注意: 这里不是img,也不是div - 通过JS生成条码
使用
- $(
selector
).JsBarcode(String
,option
)
$("#ean").EAN13("6971318588827")
配置项
这个插件配置项极少,如果没有特殊需求的话默认就好了,如果有需求,请自行百度吧,我就不搬砖了(手动滑稽)
Demo
<html>
<head>
...
<script src="./common/js/jquery-3.3.1.min.js"></script>
<script src="./common/js/jquery-ean13.min.js"></script>
...
</head>
<body>
...
<div class="barcode">
<canvas id="ean" width="300px" height="120px"></canvas>
</div>
...
</body>
<script >
// 传入字符串生成条形码
$("#ean").EAN13("6971318511117");
</script>
</html>
最后贴个实际成果图
后记:EAN13条形码有格式要求,随便填写无法生成
其实JsBarcode也是可以直接生成EAN13格式的条形码的
JsBarcode("#ean", "6971318501227", {format: "EAN13"});
EAN13格式的编码是有校验的,如果格式不对,就无法生成,我在开始使用JsBarcode生成EAN13格式编码的时候就是随便写了个12345678进去,结果死活没有生成出来,让我怀疑插件是否有问题,这才使用jquery-ean13插件,然后使用了示例中的字符串成功生成。所以在调试时一定要注意
EAN13格式的条形码生成一定要符合格式才能正常生成