前端生成、下载二维码

前台生成、下载二维码

点击查看按钮，弹出二维码弹框

查看按钮

<el-button type="text" @click="useqrcode(scope.row)" class="mybtn">查看</el-button>
//scope.row获取行内的数据，二维码包含的信息

二维码弹框

 <el-dialog title="弹框标题名称" :visible.sync="dialogCodeVisible" :close-on-click-modal="false" center  @close="QrCancel()" width="500px">
      <el-scrollbar :native="false" class="scrollBar" style="text-align:center">
         <div>
           <span>二维码名称</span>
           <el-button size="mini" type="primary" style="width:60px;height:20px" @click="fresh()">刷新</el-button>
           <canvas id="canvas"></canvas> //二维码
         </div>
      </el-scrollbar>
       <div style="text-align:center">
           <el-button type="primary" class="downLoad" @click="downQrCode()">下载二维码</el-button>
       </div>
 </el-dialog>

二维码样式

 #canvas{
    width: 80% !important;
    height: 80% !important;
    margin: 0 8%;
  }

功能

import QRCode from "qrcode";	//引入插件

点击查看触发事件

//参数用于模拟
useqrcode(parkingNo,voucher,bindingId,parkingName,couponRuleName){
    const self=this;
    self.qrcodeName = parkingName;
    self.bindingId = bindingId;
    self.voucher=voucher;
    self.parkingNo = parkingNo
    self.parkingName = parkingName
    self.couponRuleName = couponRuleName	//刷新时使用
    self.showOrDo=false;
    self.dialogCodeVisible=true
    setTimeout(function(){
          this.QueryDetail =
          "http://url地址"+"?参数名=" + 参数值 
          let canvas = document.getElementById("canvas");
          QRCode.toCanvas(
          canvas,
          this.QueryDetail,
          { width: 1000, height: 1000, color: { dark: "#000000" } },
          function(error) {
            if (error) console.error(error);
          }
        )
      },100)
  },

关闭二维码弹窗

 QrCancel(){
    this.dialogCodeVisible=false;
  },

二维码下载

  downQrCode: function() {
    let canvas;
    let oA = document.createElement("a");
    canvas = document.getElementById("canvas");
    oA.download = "优惠券二维码.png";// 设置下载的文件名，默认是'下载'
    let canPngUrl = canvas.toDataURL("image/png");
    oA.href = canPngUrl;
    document.body.appendChild(oA);
    oA.click();
    oA.remove();
  },

二维码刷新

fresh(){
    const self = this;
    // console.log(self.qrcode)
    self.$confirm("您确认要刷新二维码?", "提示",{
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() =>{
      self.$httpMannage
          .postForm({
            url: "接口地址",
            type: "POST",
            data: {
              bindingId:self.bindingId,
            }
          }).then(res =>{
            if(res.status==200){
            self.voucher=res.data
            self.handleClick()
            self.useqrcode(self.parkingNo,self.voucher,self.bindingId,self.parkingName,self.couponRuleName)
            }
          })
    }).catch(()=>{
        self.$message({
          type: "info",
          message: "已取消"
        });
    })
  },