1. 介绍

JsBarcode是用JavaScript编写的条形码生成器。 它支持多种条形码格式，并且可以在浏览器中以及与Node.js一起使用。 当用于网络时，它没有依赖关系，但是如果您愿意的话，它可以与jQuery一起使用。

2. 支持的条形码

  • CODE128
    • CODE128 (automatic mode switching)
    • CODE128 A/B/C (force mode)
  • EAN
    • EAN-13
    • EAN-8
    • EAN-5
    • EAN-2
    • UPC (A)
    • UPC (E)
  • CODE39
  • ITF
    • ITF
    • ITF-14
  • MSI
    • MSI10
    • MSI11
    • MSI1010
    • MSI1110
  • Pharmacode
  • Codabar

    3. 简单示例

    首先创建画布（或图像）

    1. <svg id="barcode"></svg>
    2. <!-- 或 -->
    3. <canvas id="canvas"></canvas>
    4. <!-- 或 -->
    5. <img id="barcode"/>

    调用方法

    ```javascript

    构造函数生成

    JsBarcode(“#barcode”, “Hi!”);

jQuery配合生成

$(“#barcode”).JsBarcode(“Hi!”);

  1. <a name="oT9P8"></a>
  2. ## 生成如下
  3. ![](https://cdn.nlark.com/yuque/0/2020/svg/747202/1594101969756-dcfac83e-c162-4b66-a11d-90b98d8eed5a.svg#align=left&display=inline&height=142&margin=%5Bobject%20Object%5D&originHeight=142&originWidth=156&size=0&status=done&style=none&width=156)
  5. <a name="koAD9"></a>
  6. # 4. 使用配置的示例
  7. <a name="H6Mo1"></a>
  8. ## 选项配置
  9. ```javascript
  10. JsBarcode("#barcode", "1234", {
  11.   format: "pharmacode",
  12.   lineColor: "#0aa",
  13.   width:4,
  14.   height:40,
  15.   displayValue: false
  16. });

生成如下

jsbarcode中文文档 - 图1

5. 高级示例

选项配置

  1. JsBarcode("#barcode")
  2.   .options({font: "OCR-B"}) // Will affect all barcodes
  3.   .EAN13("1234567890128", {fontSize: 18, textMargin: 0})
  4.   .blank(20) // Create space between the barcodes
  5.   .EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})
  6.   .render();

生成如下

jsbarcode中文文档 - 图2

6. 浏览器设置（HTML页面使用）

下载或获取CDN链接脚本

Name 支持的条形码 大小 CDN / Download
All 支持所有 10 kB JsBarcode.all.min.js
CODE128 CODE128（自动和强制模式） 6.1 kB JsBarcode.code128.min.js
CODE39 CODE39 5 kB JsBarcode.code39.min.js
EAN / UPC EAN-13, EAN-8, EAN-5, EAN-2, UPC (A) 6.5 kB JsBarcode.ean-upc.min.js
ITF ITF, ITF-14 4.9 kB JsBarcode.itf.min.js
MSI MSI, MSI10, MSI11, MSI1010, MSI1110 4.9 kB JsBarcode.msi.min.js
Pharmacode Pharmacode 4.6 kB JsBarcode.pharmacode.min.js
Codabar Codabar 4.8 kB JsBarcode.codabar.min.js

引入脚本

  1. <script src="JsBarcode.all.min.js"></script>

完成

大功告成！ 去生成一些条形码😄

7. Bower或npm使用

  1. bower install jsbarcode --save
  2. npm install jsbarcode --save

8. Node.js使用

安装

  1. npm install jsbarcode
  2. npm install canvas

使用

  1. var JsBarcode = require('jsbarcode');
  2. var Canvas = require("canvas");
  4. var canvas = new Canvas();
  5. JsBarcode(canvas, "Hello");

9. 参数选项

更多选项参考官方提供的文档

选项 默认值 值类型
format "auto" (CODE128) String
width 2 Number
height 100 Number
displayValue true Boolean
text undefined String
fontOptions "" String
font "monospace" String
textAlign "center" String
textPosition "bottom" String
textMargin 2 Number
fontSize 20 Number
background "#ffffff" String (CSS color)
lineColor "#000000" String (CSS color)
margin 10 Number
marginTop undefined Number
marginBottom undefined Number
marginLeft undefined Number
marginRight undefined Number
flat false Boolean
valid function(valid){} Function

Format

说明：条形码类型

示例

  1. JsBarcode("#barcode", "123456789012", {
  2.   format: "EAN13"
  3. });
  5. JsBarcode("#barcode", "123456789012", {
  6.   format: "CODE39"
  7. });

结果
image.png

Width

说明：单个条的宽度

示例

  1. JsBarcode("#barcode", "Smallest width", {
  2.   width: 1
  3. });
  5. JsBarcode("#barcode", "Wider barcode", {
  6.   width: 3
  7. });

结果
image.png

Height

说明：条形码的高度

示例

  1. JsBarcode("#barcode", "Wider barcode", {
  2.   height: 150
  3. });
  5. JsBarcode("#barcode", "Smallest width", {
  6.   height: 25
  7. });

结果
image.png

Text

说明：额外显示的文本

示例

  1. JsBarcode("#barcode", "Hello", {
  2.   text: "Hi!"
  3. });

结果
image.png

Font

说明：定义用于额外显示的文本的字体

示例

  1. JsBarcode("#barcode", "Fantasy font", {
  2.   font: "fantasy"
  3. });

结果
image.png

Font Options

说明：额外显示的文本样式，可选值：粗体 bold / 斜体 italic / 粗斜体 bold italic

示例

  1. JsBarcode("#barcode", "Bold text", {
  2.   fontOptions: "bold"
  3. });
  5. JsBarcode("#barcode", "Italic text", {
  6.   fontOptions: "italic"
  7. });
  9. JsBarcode("#barcode", "Both options", {
  10.   fontOptions: "bold italic"
  11. });

结果
image.png

Text Align

说明：设置额外显示的文本的水平对齐方式，值为left / center / right.

示例

  1. JsBarcode("#barcode", "Left text", {
  2.   textAlign: "left"
  3. });

结果
image.png

Text Position

说明：设置额外显示的文本的位置，值为 bottom / top

示例

  1. JsBarcode("#barcode", "Top text", {
  2.   textPosition: "top"
  3. });

结果
image.png

Text Margin

说明：设置条形码和文本之间的间隔

示例

  1. JsBarcode("#barcode", "Text margin", {
  2.   textMargin: 25
  3. });

结果
image.png

Font Size

说明：设置文字大小

示例

  1. JsBarcode("#barcode", "Bigger text", {
  2.   fontSize: 40
  3. });

结果
image.png

Background

说明：设置条形码的背景（色）

示例

  1. JsBarcode("#barcode", "Blue background", {
  2.   background: "#ccffff"
  3. });

结果
image.png

Line Color

说明：设置条形和文本的颜色

示例

  1. JsBarcode("#barcode", "Red lines", {
  2.   lineColor: "#990000"
  3. });

结果
image.png

Margins

说明：设置条形码距离容器的外变距

示例

  1. JsBarcode("#barcode", "Bigger margins", {
  2.   margin: 30,
  3.   background: "#dddddd"
  4. });
  6. JsBarcode("#barcode", "Left/Top margin", {
  7.   marginLeft: 30,
  8.   marginTop: 50,
  9.   background: "#dddddd"
  10. });

结果
image.png

10. 示例

Barcode Generator

Simple CodePen Demo

Settings CodePen Demo