一、jsbarcode生成条形码: 用于生成条形码的js库，支持浏览器和node.js

1、安装引用

① 可以通过script标签将jsbarcode包进行引入项目
script src="http://www.jq22.com/jquery/vue.min.js"></script>
<script src='js/JsBarcode.all.min.js'></script>

② 使用npm进行安装jsbarcode包，然后通过import进行引入项目
npm install jsbarcode --save
import JsBarcode from 'jsbarcode'

2、使用

① 简单使用
<svg id="jsbarcode1"></svg>
<img id="jsbarcode111" alt="" ref="jsbarcode111">
JsBarcode(document.getElementById('jsbarcode1'), 'this is jsbarcode1')
JsBarcode(this.$refs.jsbarcode111, 'this is jsbarcode111')



② 使用jQuery
<a id="jsbarcode2"></a>
// $('#jsbarcode2').JsBarcode('this is jsbarcode3')



③ 复杂使用
<canvas id="jsbarcode3"></canvas>
JsBarcode(document.getElementById('jsbarcode3'), 'this is jsbarcode', {
    format: 'CODE39', // 选择要使用的条形码类型
    width: 3, // 设置条之间的宽度
    height: 100, // 设置条的高度
    displayValue: true, // 是否在条形码下显示文字
    text: '432432', // 覆盖显示的文本
    fontOptions: 'bold italic', // 字体加粗 斜体
    font: 'fantasy', // 设置文本字体
    textAlign: 'left', // 设置文本的水平对齐方式
    textPosition: 'top', // 设置文本的垂直位置
    textMargin: 5, // 设置条形码和文本的距离
    fontSize: 15, // 设置文本的大小
    background: '#f00', // 设置条形码的背景
    lineColor: '#0f0', // 设置条和文本的颜色
    margin: 15 // 设置条形码周围的空白边距
})



④ 链式使用
<img id="jsbarcode4" alt="" ref="jsbarcode3">
JsBarcode(document.getElementById('jsbarcode4'))
.options({ font: 'OCR-B' }) // Will affect all barcodes
.EAN13('1234567890128', { fontSize: 18, textMargin: 0 })
.blank(20) // Create space between the barcodes
.EAN5('12345', { height: 85, textPosition: 'top', fontSize: 16, marginTop: 15 })
.render()



⑤ 组件式使用
<svg id="jsbarcode5" jsbarcode-format="UPC" jsbarcode-value="123456789012" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold"></svg>
JsBarcode(document.getElementById('jsbarcode5')).init()

3、以上代码生成的条形码效果如图：

4、jsbarcode支持的条形码有：

5、浏览器支持性

6、jsbarcode详细使用请点击这里

二、vue-barcode生成条形码： 是对Jsbarcode条码库的简单包装

1、安装引用

npm install vue-barcode--save

2、使用

 <vue-barcode
  :value="value"
  margin-right="5"
  line-color="#0f0"
  display-value="432141243"
  font="bold"
  margin-left="5"
  text-margin="10"
  text-position="bottom"
  width="1"
  ean128="ean128"
  text="this is VueBarcode1111"
  height="50"
  margin-top="10"
  margin="10"
  margin-bottom="20"
  text-align="right"
  font-size="20"
  background="#f00">不支持vue-barcode</vue-barcode>


import VueBarcode from 'vue-qrcode'

export default{
    components: { VueBarcode },
    data () {
        return {
          value: 'this is VueBarcode' //条形码内容
        }
    },
}

3、更多options配置请点击这里进行查询