JsBarcode的使用

说明

本文档是以JsBarcode 3.11版本为基础说明。JsBarcode官网

JsBarcode是什么

JsBarcode是一个用于生成条形码的js库，支持浏览器和node.js，浏览器端使用不依赖于其他库。

JsBarcode支持的条形码

• CODE128
  • CODE128 (automatic mode switching)
    支持128个ASCII码
  • 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

用法

浏览器端使用

浏览器的支持性

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

使用步骤

1. 引入JsBarcode 的js库

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

   JsBarcode v3.11.0下载地址
   如果确认只会使用某一种条形码，也可以针对条形码类型下载对应的条形码库，不用下载整个包。
2. 页面创建存放条形码容器
   页面允许的条形码容器有三种：canvas、svg、img

   <canvas id="canvas"></canvas>
   <img id="barcode"/>
   <svg id="barcode"></svg>
   

3. 调用JsBarcode的方法生成条形码

   //生成 Hi! 内容的条形码
   //第一个参数是条形码容器的选择器，第二个参数是要条形码的文本
   JsBarcode("#barcode", "Hi!");
   

node.js端使用

待实验

JsBarcode使用选项

JsBarcode的接口

JsBarcode('元素选择器','格式化文本',选项);

选项

选项	作用	默认值	值类型	说明
format	指定使用的条形码类型	“auto”	String	auto 就是使用CODE128
width	指定条形码中单条竖线的宽度	2	Number	并不是整个条形码的宽度
height	指定条形码高度	100	Number
displayValue	指定是否显示条形码文本	true	Boolean
fontOptions	设置条形码文本的粗体和斜体样式	“”	String	bold / italic / bold italic
font	设置条形码文本的字体	monospace	String
fontSize	设置条形码文本的字体大小	16	Number
textAlign	设置条形码文本的水平对齐方向	center	String	left / center / right
textPosition	设置条形码文本的位置	bottom	String	bottom / top
textMargin	设置条形码文本和条形码间的距离	2	Number	存在bug：当textPosition设置为top时，如果textMargin设置过大会导致条形码文本超出边框而消失或部分显示
background	设置整个条形码容器的背景颜色	#ffffff	String
lineColor	设置条形码及其文本的颜色	#000000	String
margin	设置条形码和条形码文本组合体的外边距	10	Number	设置的并不是整个条形码容器的外边距，反而可以理解成是整个条形码的内边距，也可以单独设置某一个边距，marginTop、marginRight、marginBottom、marginLeft
valid	执行生成条形码过程后的回调函数	function (valid){}	Function	接收一个参数valid，表示条形码生成是否成功，一般是指是否受支持的条形码文本，如果是因为传入不支持的条形码类型会直接报错