vue：生成条形码

长相思979

已于 2023-06-16 14:00:50 修改

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-06-16 14:00:18 首次发布

本文链接：https://blog.csdn.net/weixin_63896561/article/details/131245486

版权

参考：vue 后台管理系统条形码生成 – 源码巴士

安装：

npm install @xkeshi/vue-barcode

main.js中引入：

import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件
Vue.component('barcode', VueBarcode);  //声明条形码组件

页面引用：（如果只需要一个条形码，则不需要list，直接给barcode绑定字符即可）

<p class="printOrder" v-for="(v,k) in list">
 
   <barcode :value="v.barcodes" :options="barcode_option" tag="svg" ></barcode>
 
</p>//注意，要显示的内容不能出现汉字，否则显示不出来，可以有空格特殊字符等

return{
 
      barcode_option:{
 
        displayValue: true, //是否默认显示条形码数据
 
        //textPosition  :'top', //条形码数据显示的位置
 
        background: '#fff', //条形码背景颜色
 
        valid: function (valid) {
 
          console.log(valid)
 
        },
 
        width:'1px',//单个条形码的宽度
 
        height: '55px',
 
        fontSize: '22px' //字体大小
 
    },
 
      list:[{barcodes:'A01-01-01'},{barcodes:'A01-01-01'}]
 
    }
 
  }

另附条形码的所有配置参数：

 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//设置条形码周围的空白边距

效果：