vue实现带logo的二维码/商品条形码/打印商品吊牌

一、带logo的二维码

1.安装

npm install vue-qr --save

2.在页面或组件中使用

<template>
  <div id="qrcode">
    <vue-qr
      :size="qrcodeVue.size"
      :text="qrcodeVue.value"
      :colorLight="qrcodeVue.bgColor"
      :colorDark="qrcodeVue.fgColor"
      :logoSrc="qrcodeVue.logo"
      :logoScale="qrcodeVue.logoSize"
    >
    </vue-qr>
  </div>
</template>
 
<script>
import vueQr from \'vue-qr\'
export default {
  components: {
    vueQr
  },
  data() {
     return {
        // 二维码
      qrcodeVue: {
        size: 512,
        bgColor: \'#ffffff\',
        fgColor: \'#000000\',
        // 二维码地址
        value: \'https://www.baidu.com\',
        // logo图片
        logo: \'https://static.paipaiyin.cn/test/pxKGTpymnX1586327945737.png\',
        logoSize: 0.20,
      },
    }
  }
}
</script>

3.下载带logo的二维码

// 下载二维码
downloadQrcode() {
  // 获取base64的图片节点
  let img = document.getElementById(\'qrcode\').getElementsByTagName(\'img\')[0];
  // 构建画布
  let canvas = document.createElement(\'canvas\');
  canvas.width = 512;
  canvas.height = 512;
  canvas.getContext(\'2d\').drawImage(img, 0, 0);
  // 构造url
  let url = canvas.toDataURL(\'image/png\');
  // 构造a标签并模拟点击
  let downloadLink = document.createElement(\'a\');
  downloadLink.setAttribute(\'href\', url);
  downloadLink.setAttribute(\'download\', \'二维码.png\');
  downloadLink.click();
},

4.详细参数介绍

官方GitHub地址介绍：https://www.npmjs.com/package/vue-qr

 

二、商品条形码

1.安装

npm install @xkeshi/vue-barcode

2.在页面或组件中使用

html

<barcode :value="barcode" :options="barcode_option" tag="svg"></barcode>

引入

import VueBarcode from \'@xkeshi/vue-barcode\'; 
import Vue from \'vue\'; 
Vue.component(\'barcode\', VueBarcode); 

数据

// 条形码数据 
barcode: \'W20SST0010000138\', 
barcode_option: { 
  displayValue: true, 
  background: \'transparent\', 
  width: \'1px\', 
  height: \'38px\', 
  fontSize: \'10px\' 
} 

3.参数详情介绍

选择要使用的条形码类型	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

 

 

 

 

 

 

 

 

三、打印商品吊牌

1.安装

npm install vue-print-nb --save

2.在页面或组件中使用

引入

import Print from \'vue-print-nb\'; 
import Vue from \'vue\'; 
Vue.use(Print); 

在页面中使用

<template>
  <div>
    <div class="export-labelbox" id="productLabelDoc"> 
      <div class="labelbox-p"> 
        <p class="p1">【twzdB】女装 优质长绒棉宽松长衬衫(长袖)418415 优衣库UNIQLO</p> 
        <p class="p2">规格：红色/S</p> 
      </div> 
      <div class="labelbox-barcode"> 
        <barcode :value="barcode" :options="barcode_option" tag="svg"></barcode> 
      </div> 
    </div> 
    <Button class="exportBtn" type="primary" width="120px" v-print="\'#productLabelDoc\'">打印</Button>    
 </div>
</template>