第一步,先安装 jsbarcode 插件
npm install jsbarcode --save
第二步,在想要生成JsBarcode的Vue页面引入组件
import JsBarcode from 'jsbarcode';
第三步,调用方法(注意:如果想在页面初始化的时候就展示需要在 生命周期 mounted 的方法里调用)
1.在html页面上定义canvas组件,用于绘制码。
<canvas id="testId"/>
selector 是传递你要生产的画布的id,例如你页面上定义了上面的 canvas ,你就需要传 #testId,
data 是一维码的值
JsBarcode(selector, data, { displayValue: true, height: 22, margin: 5, fontSize: 12 })
format: "CODE39",//选择要使用的条形码类型
width:3,//设置条之间的宽度
height:100,//高度
displayValue:true,//是否在条形码下方显示文字
text:"456",//覆盖显示的文本
fontOptions:"bold italic",//使文字加粗体或变斜体
font:"fantasy",//设置文本的字体 textAlign:"left",//设置文本的水平对齐方式
textPosition:"top",//设置文本的垂直位置 textMargin:5,//设置条形码和文本之间的间距
fontSize:15,//设置文本的大小 background:"#eee",//设置条形码的背景
lineColor:"#2196f3",//设置条和文本的颜色。
margin:15//设置条形码周围的空白边距
具体属性,可以点进去看,或者取官网看api