vue+vue-qr二维码生成与下载

1. import VueQr from ‘vue-qr’;

2. components: {
   /* @begin components # 自定义组件 /
   VueQr,
   / @end components */
   },

3. 标签定义

 <div class="qr-content">
      <vue-qr ref="vueqrref" :text="qrCodeUrl" :options="qrOptions"></vue-qr>
      <br>
      <span style="position:relative;left:80px;top:-10px;color:#0099cc;text-decoration:underline;cursor:pointer" @click="downloadQRCode">下载</span>
  </div>

4. 二维码样式
   qrCodeUrl:‘http://****/**’,
   qrOptions:{
   size:200,
   bgColor:‘#FFFFFF’,
   fgColor:‘#000000’,
   },
   5.点击下载

 /**
     * 下载二维码
     */
      downloadQRCode(){
        const self = this;
        // 通过ref获取vue-qr组件的实例
        const qrInstance = self.$refs.vueqrref;
        // 获取img元素
        const image = qrInstance.$el;
        // 获取img元素的base64编码
        const url = image.currentSrc;
        const link = document.createElement('a');  
        link.href = url;
        // 下载文件名
        link.download = 'qrcode.png'; 
        link.click();
        // 释放URL对象
        URL.revokeObjectURL(link.href);
    },

效果图：