引言

JsBarcode是一个用JavaScript编写的条形码生成器。它支持多种条形码格式，可在浏览器和Node.js中使用。如果你在项目中使用了jquery也可以使用jquery，但它不是依赖项。

github

https://github.com/lindell/JsBarcode

支持的条形码种类

• 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

浏览器中使用举例

• 通过svg、canvas、img都可以

<svg id="barcode"></svg>
<!-- or -->
<canvas id="barcode"></canvas>
<!-- or -->
<img id="barcode"/>

JsBarcode("#barcode", "Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");

JsBarcode("#barcode", "1234", {
 format: "pharmacode",
 lineColor: "#0aa",
 width:4,
 height:40,
 displayValue: false
});

• 你也可以使用一些自定义的配置

JsBarcode("#barcode", "1234", {
 format: "pharmacode",
 lineColor: "#0aa",
 width:4,
 height:40,
 displayValue: false
});

• 更高级的用法

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

• 直接在html标签中使用

<svg class="barcode"
 jsbarcode-format="upc"
 jsbarcode-value="123456789012"
 jsbarcode-textmargin="0"
 jsbarcode-fontoptions="bold">
</svg>

初始化还是需要的

JsBarcode(".barcode").init();

安装使用

• 浏览器使用

你可以下载完整的支持所有受支持的条形码，也可以下载特定的条形码，根据自己的需要进行下载，具体的下载地址可以到github下载。

浏览器引入

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

使用broser或者npm包管理

bower install jsbarcode --save
npm install jsbarcode --save

• nodejs使用

首先你的安装jsbarcode和canvas

npm install jsbarcode
npm install canvas

使用简单案例

var JsBarcode = require('jsbarcode');
// Canvas v1
var Canvas = require("canvas");
// Canvas v2
var { createCanvas } = require("canvas");
// Canvas v1
var canvas = new Canvas();
// Canvas v2
var canvas = createCanvas();
JsBarcode(canvas, "Hello");

所有配置项

总结

JSBarcode是一个条形码JavaScript中的条形码生成插件，支持浏览器端和nodejs，在很多业务场景下都可以使用到，非常的简单实用！希望对你有所帮助！