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

妖狐艹你老母 2023-06-20 13:59 8阅读 0赞

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

### 文章目录 ###

*  前端利用js生成普通条形码和EAN商品条形码（69码）
 *   *  普通条形码的生成
     *   *   *  环境
             *  步骤
             *  使用
             *  常用配置项
             *  Demo
     *  EAN商品条形码（商品69码）的生成
     *   *   *  环境
             *  步骤
             *  使用
             *  配置项
             *  Demo
 *  最后贴个实际成果图
 *   *  后记：EAN13条形码有格式要求，随便填写无法生成

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

## 普通条形码的生成 ##

#### 环境 ####

*  插件：`JsBarcode`
 *  依赖：`jquery`

#### 步骤 ####

1.  引入插件
2.  创建`img`标签存储生成的图片
3.  通过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 ####

<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 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`

#### 步骤 ####

1.  引入插件
2.  创建`canvas`标签存储生成的图片， **注意：** 这里不是img，也不是div
3.  通过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>

--------------------

# 最后贴个实际成果图 #

![条形码][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70]

## 后记：EAN13条形码有格式要求，随便填写无法生成 ##

其实JsBarcode也是可以直接生成EAN13格式的条形码的

JsBarcode("#ean", "6971318501227", {
        format: "EAN13"});

EAN13格式的编码是有校验的，如果格式不对，就无法生成，我在开始使用JsBarcode生成EAN13格式编码的时候就是随便写了个12345678进去，结果死活没有生成出来，让我怀疑插件是否有问题，这才使用jquery-ean13插件，然后使用了示例中的字符串成功生成。所以在调试时一定要注意

> **EAN13格式的条形码生成一定要符合格式才能正常生成**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191210174836598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n,size_16,color_FFFFFF,t_70