vue运用JsBarcode生成一维码

第一步，先安装 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