其他分享
首页 > 其他分享> > Vue实现长按二维码保存到本地

Vue实现长按二维码保存到本地

作者：互联网

<div id="qrcode" @click="aa"></div>

 methods: {


   aa(){//点击下载二维码保存到本地
      setTimeout(()=>{
      let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
      let a = document.createElement('a')
      a.href = myCanvas[0].toDataURL('image/png');
      a.download = '供餐二维码';
       a.click()
         this.$message({
           showClose: true,
           message: '正在进行下载保存',
           type: 'success'
          });
      },0)
    },


 },


mounted(){
   this.$nextTick(()=>{//绘制二维码
      let qrCodeContainer = document.getElementById('qrcode');
      qrCodeContainer.innerHTML = '';
      let qrcode = new QRCode(qrCodeContainer, {
         width: 180,//设置宽高
         height: 180,
         correctLevel: 3 
        });
         qrcode.makeCode(this.qrCode+'?idt_owner='+this.idt_owner+'&idt_area_open='+this.base_ids);
         this.imgUrl=this.qrCode+'?idt_owner='+this.idt_owner+'&idt_area_open='+this.base_ids//获取二维码地址，this.qrCode（域名）+参数


$("#qrcode").attr("title","");//清除二维码链接数据显示 }) }



 


标签：Vue,idt,qrCodeContainer,owner,二维码,let,本地,qrcode	

来源： https://www.cnblogs.com/rouyhx/p/14742123.html