说明
本文档是以JsBarcode 3.11版本为基础说明。JsBarcode官网
JsBarcode是什么
JsBarcode是一个用于生成条形码的js库,支持浏览器和node.js,浏览器端使用不依赖于其他库。
JsBarcode支持的条形码
- CODE128
- CODE128 (automatic mode switching)
支持128个ASCII码 - CODE128 A/B/C (force mode)
- CODE128 (automatic mode switching)
- 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+ |
使用步骤
- 引入JsBarcode 的js库
JsBarcode v3.11.0下载地址<script src="JsBarcode.all.min.js"></script>
如果确认只会使用某一种条形码,也可以针对条形码类型下载对应的条形码库,不用下载整个包。 - 页面创建存放条形码容器
页面允许的条形码容器有三种:canvas、svg、img<canvas id="canvas"></canvas> <img id="barcode"/> <svg id="barcode"></svg>
- 调用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,表示条形码生成是否成功,一般是指是否受支持的条形码文本,如果是因为传入不支持的条形码类型会直接报错 |