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

  • Z时代
  • 2024-01-10
  • 分类：综合

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 = \'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","");//清除二维码链接数据显示 }) }
以上是 Vue实现长按二维码保存到本地 的全部内容，
                        来源链接：
                            utcz.com/z/376171.html
回到顶部