vue實現帶logo的二維碼/商品條形碼/列印商品吊牌

騎碼行天下發表於2020-11-12

一、帶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>

 

相關文章