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

时间:2024-03-12 10:19:50
<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 = \'qrcode\';
       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","");//清除二维码链接数据显示 }) }