Javascript

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实现长按二维码保存到本地的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
                    


                


                
                
 

                
                

                    

                        
您可能喜欢

                        
                    

                

                

            

             
            
            
            
        

        
        

        

            

                
栏目导航