轻量级的条形码生成库-JsBarcode

JsBarcode 是一个用 JavaScript 编写的条形码生成器。

它支持多种条形码格式，可以在浏览器和 Node.js 中使用，但它的体积却只有 10.1 kb。在它用于 web 时，它不需要任何的第三方依赖。

同时，在 JQuery 中，也可以很方便的使用。

浏览器兼容性

IE	Google Chrome	FireFox	Safari
9+	9+	12+	5+

目前支持的条形码类型

类别	类型
CODE128	CODE128
CODE39	CODE39
EAN / UPC	EAN-13、 EAN-8、 EAN-5、 EAN-2、 UPC (A)、UPC (E)
ITF	ITF/ ITF-14
MSI	MSI、 MSI10、 MSI11、 MSI1010、 MSI1110
Pharmacode	Pharmacode
Codabar	Codabar

安装

cdn 引入：

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>

使用 npm 管理：

npm install jsbarcode --save

浏览器中的使用

目前，jsbarcode 支持三种容器渲染条形码：

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

引入 jsbarcode 并且渲染条形码：

import jsbarcode from jsbarcode;

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

// 或者，通过链式调用一次生成多个条形码
JsBarcode("#barcode2")
  .options({ font: "OCR-B" }) // 条形码的共有配置
  .EAN13("123456789012", { fontSize: 18, textMargin: 0 })
  .blank(20) // 条形码之间的间隔
  .EAN5("12345", { height: 85, textPosition: "top", fontSize: 16, marginTop: 15 })
  .render()

// 通过 jQuery 使用，JsBarcode 会自动挂载到 jQuery 实例中
$("#barcode").JsBarcode("1234", {
  format: "CODE39",
  lineColor: "#0aa",
  width: 4,
  height: 40,
  displayValue: false
});

或者，直接在 HTML 中声明选项：

<svg
  id="barcode"
  jsbarcode-format="CODE128"
  jsbarcode-value="1234"
  jsbarcode-textmargin="0"
  jsbarcode-fontoptions="bold"
></svg>

在 javascript 中初始化即可：

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

在 Node.js 中使用

const JsBarcode = require("jsbarcode");

const Canvas = require("canvas");

const canvas = new Canvas();

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

options 选项详细介绍

选项	作用	默认值	值类型	说明
format	指定使用的条形码类型	"auto"	String	auto 就是使用 CODE128
width	指定条形码中单条竖线的宽度	2	Number	并不是整个条形码的宽度
height	指定条形码高度	100	Number
displayValue	指定是否显示条形码文本	true	Boolean
fontOptions	设置条形码文本的粗体和斜体样式	""	String	bold / italic / bold italic
font	设置条形码文本的字体	monospace	String
fontSize	设置条形码文本的字体大小	20	Number
textAlign	设置条形码文本的水平对齐方向	center	String	left / center / right
textPosition	设置条形码文本的位置	bottom	String	bottom / top
textMargin	设置条形码文本和条形码间的距离	2	Number
background	设置整个条形码容器的背景颜色	#ffffff	String
lineColor	设置条形码及其文本的颜色	#000000	String
margin	设置条形码和条形码文本组合体的外边距	10	Number	可以单独设置某一个边距，marginTop、marginRight、marginBottom、marginLeft
valid	执行生成条形码过程后的回调函数	function (valid){}	Function	接收一个参数 valid，表示条形码生成是否成功

配置项效果预览