vue2 使用vue-qr生成二维码并打印二维码

记录使用vue-qr生成二维码的过程。

参考文章vue中使用vue-qr生成漂亮的二维码

参考文章vue中使用qrcode生成二维码并实现打印功能

本文主要实现两个功能：

1. 输入不同的地址，生成不同的二维码；生成带logo的二维码；生成随机颜色的二维码；下载二维码。
2. 选择表格对应数据，生成二维码并打印，一页纸仅打印一个二维码。

• 安装

// npm
npm install vue-qr --save

// yarn
yarn add vue-qr

• 引入

// vue2.x
import VueQr from 'vue-qr'
// vue3.x
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

• 功能一：生成二维码

参数说明：

• text

二维码的内容，即扫出来的结果。

• logoSrc

嵌入二维码中心的logo图片地址。

• color-dark

实点的颜色，即有色部分。修改该值可改变实点的颜色，即二维码整体展示的颜色。

• callback

生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)

import VueQr from 'vue-qr'
import logo from '@/assets/image/logo.png'
import { getColor } from '@/utils/index.js'
export default {
  name: 'dynamicQrCode',
  components:{
    VueQr,
  },
  data(){
    return{
      text: 'https://zhuanlan.zhihu.com/p/427065468',
      logoSrc: '',
      randomColor: 'black',
      qrCodeUrl: '', // 存放生成的二维码url
    }
  },
  methods:{
    qrCodeCallback(url){
      this.qrCodeUrl = url
    },
    handleQrCode(type){
      switch (type){
        case 1:
          this.randomColor = 'black'
          this.logoSrc = ''
          break
        case 2:
          this.logoSrc = logo
          break
        case 3:
          this.randomColor = getColor()
          break
        case 4:
          let name  = new Date().getTime();
          let a = document.createElement("a");
          a.style.display = "none";
          a.download = name;
          a.href = this.qrCodeUrl;
          document.body.appendChild(a);
          a.click();
          a.remove()
          break
      }
    },
  }
}

生成随机颜色

// 生成随机颜色
export function getColor() {
  var str = '#'
  var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
  for (var i = 0; i < 6; i++) {
    var num = parseInt(Math.random() * 16)
    str += arr[num]
  }
  return str
}

• 效果图

 

• 功能二：打印二维码

该功能需要用到vue-print-nb打印插件，需先安装插件。该插件的安装及使用可以看一下这篇文章（插入链接）。

实现勾选表格的数据，用表格的selection-change事件，当勾选的数据发生变化时，实时获取到已勾选的数据。

  

    

      
        
        带logo
      
      
        
        打印二维码
      
    
    

      
        
        
        
        
        
        
        
      
    
  

存放已勾选的数据生成的二维码

这里不希望在页面上显示已生成的二维码

.qrCode-container{
  width: 0;
  height: 0;
  overflow: hidden;
}

在打印时希望，一张纸只打印一个二维码，使用样式page-break-after: always

.qrCode-content{
  margin-top: 200px;
  margin-left: 160px;
  page-break-after:always
}

• 打印二维码不带logo的效果图

 ​​​​​​​

（图片违规了，马赛克之后的效果图） 

•  打印二维码带logo的效果图

 （图片违规了，马赛克之后的效果图）