安裝

yarn add jsbarcode

使用

// HTMLElement 承載條形碼的元素  svg/canvas
// text 顯示在條形碼下方的文字
// option  條形碼的配置項 具體見【條形碼的配置項】
JsBarcode(HTMLElement, text, option) 

條形碼的配置項

使用中的option

background: "#ffffff"  // 背景色
displayValue: true // 是否顯示條形碼下面的文字
font: "monospace" // 字型
fontOptions: "" // 字型相關的配置
fontSize: 20 // 字型大小 預設20
format: "CODE128" // 條形碼的種類 具體見 format
height: 40 // 高度
lineColor: "#000000" // 條形碼線條的顏色
margin: 8 // 條形碼四種的間距 類似於div的padding
marginBottom: 8 // 下邊距
marginLeft: 8 // 左邊距
marginRight: 8 // 右邊距
marginTop: 8 // 上邊距
text: undefined 
textAlign: "center" // 條形碼下面的文字的對齊方式
textMargin: 2 
textPosition: "bottom" // 條形碼下面文字的位置
 

條形碼的種類

條形碼的配置項選項中的format的值

CODE128
    CODE128 (自動模式切換)
    CODE128 A/B/C (強制模式)
EAN
    EAN-13
    EAN-8
    EAN-5
    EAN-2
    UPC (A)
CODE39
ITF-14
MSI
    MSI10
    MSI11
    MSI1010
    MSI1110
Pharmacode
Codabar