一、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、浏览器支持性
二、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' //条形码内容
}
},
}