jsbarcode是一個(gè)不依賴任何庫/框架的條形碼生成庫,使用原生JavaScript寫成。
安裝依賴包
npm install jsbarcode --save
在使用頁面引入依賴包
import JsBarcode from ‘jsbarcode’
定義img標(biāo)簽和id
format: “CODE39”,//選擇要使用的條形碼類型
width:3,//設(shè)置條之間的寬度
height:100,//高度
displayValue:true,//是否在條形碼下方顯示文字
text:“456”,//覆蓋顯示的文本
fontOptions:“bold italic”,//使文字加粗體或變斜體
font:“fantasy”,//設(shè)置文本的字體
textAlign:“l(fā)eft”,//設(shè)置文本的水平對(duì)齊方式
textPosition:“top”,//設(shè)置文本的垂直位置
textMargin:5,//設(shè)置條形碼和文本之間的間距
fontSize:15,//設(shè)置文本的大小
background:"#eee",//設(shè)置條形碼的背景
lineColor:"#2196f3",//設(shè)置條和文本的顏色。
margin:15//設(shè)置條形碼周圍的空白邊距
代碼:
JavaScript
JsBarcode("#imgbarcode", "1234567890", { format: "CODE128",//選擇要使用的條形碼類型 width:3,//設(shè)置條之間的寬度 height:100,//高度 displayValue:true,//是否在條形碼下方顯示文字 text:"456",//覆蓋顯示的文本 fontOptions:"bold italic",//使文字加粗體或變斜體 font:"fantasy",//設(shè)置文本的字體 textAlign:"left",//設(shè)置文本的水平對(duì)齊方式 textPosition:"top",//設(shè)置文本的垂直位置 textMargin:5,//設(shè)置條形碼和文本之間的間距 fontSize:15,//設(shè)置文本的大小 background:"#eee",//設(shè)置條形碼的背景 lineColor:"#2196f3",//設(shè)置條和文本的顏色。 margin:15//設(shè)置條形碼周圍的空白邊距});