zoukankan      html  css  js  c++  java
  • 弹窗-二维码生成与下载

    div(class='zzc' v-show="showCopyPassword")
      div(class='dia_qrcode' @click="handleClose")
      div(class='dia_qrcode_div')
        el-button(class='dia_qrcode_btn', @click="downLoad") 下载二维码
        div(id="qrcode")
     
    import QRCode from 'qrcodejs2'
     
     
    showCopyPassword: false,
     
     
     
    async copyPassword(row,val) {
     
      this.showCopyPassword = true;
      this.qrcode = new QRCode('qrcode', {
      text: actionButtonUrl + row.activityId,
        150,
        height: 150,
        colorDark: '#000', // 二维码颜色
        colorLight: "#ffffff" // 背景颜色
      });
    },
    handleClose() {
      document.getElementById('qrcode').innerHTML = "";
      this.showCopyPassword = false;
    },
    downLoad() {
      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
      if(myCanvas && myCanvas.length) {
        console.log(myCanvas);
        const a = document.createElement('a')
        a.href = myCanvas[0].toDataURL('image/png');
        a.download = '二维码';
        a.click()
        this.$message({
          message: "正在进行下载保存",
          type: 'success'
        })
      }else {
        this.$message.error('下载失败!')
      }
    },
     
     
  • 相关阅读:
    PHP上传文件到阿里云OSS,nginx代理访问
    知识点
    WEB安全----XSS和CSRF
    note3
    linux crontab 执行任务(7秒执行)
    composer的自动加载机制(autoload)
    php-fpm的执行方式 (进程管理模式)
    CSS3:pointer-events | a标签禁用
    CSS3: @font-face 介绍与使用
    css公共样式 | 标签元素初始化
  • 原文地址:https://www.cnblogs.com/J-Luck/p/14042737.html
Copyright © 2011-2022 走看看