前端js生成条形码和EAN商品码（69码）

最新推荐文章于 2024-05-02 14:26:53 发布

做我的code吧

最新推荐文章于 2024-05-02 14:26:53 发布

阅读量5.3k

点赞数 1

分类专栏：前端文章标签：前端条形码 jquer库

本文链接：https://blog.csdn.net/yueguangMaNong/article/details/103478154

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端利用js生成普通条形码和EAN商品条形码（69码）

文章目录

前端利用js生成普通条形码和EAN商品条形码（69码）
最后贴个实际成果图
- 后记：EAN13条形码有格式要求，随便填写无法生成

由于工作需要，这两天接触了前端生成条形码的一些技术，在此做个笔记，也方便以后有需要的同行可以快速完成开发任务。

普通条形码的生成

环境

插件：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格式的条形码生成一定要符合格式才能正常生成

做我的code吧

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端js生成条形码和EAN商品码（69码）

前端利用js生成普通条形码和EAN商品条形码（69码）文章目录前端利用js生成普通条形码和EAN商品条形码（69码）普通条形码的生成环境步骤使用常用配置项DemoEAN商品条形码（商品69码）的生成环境步骤使用配置项Demo最后贴个实际成果图由于工作需要，这两天接触了前端生成条形码的一些技术，在此做个笔记，也方便以后有需要的同行可以快速完成开发任务。普通条形码的生成环境插件：JsB...
复制链接

扫一扫