vue中 jsbarcode的使用技巧

vue 生成条形码 jsbarcode

安装jsbarcode

npm install jsbarcode --save 

引入依赖包

import JsBarcode from 'jsbarcode'

定义 img 标签

<img id="barcode" />

在使用页面生成

  JsBarcode('#barcode', 'DY2020080400088', {
      format: 'CODE39',
      lineColor: '#000',
      background: '#EBEEF5',
      width: 2,
      height: 40,
      displayValue: false
    })

jsbarcode 常见的属性

<img />
<script>
JsBarcode("#barcode", "DY2020080400088", {
 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//设置条形码周围的空白边距
});
</script>

试一试

在线 jsbarcode练习

官方文档

https://github.com/lindell/JsBarcode#readme
https://www.npmjs.com/package/jsbarcode