二维码 生成下载

使用工具: canvas

网上地址: 

 https://www.cnblogs.com/zhengweijie/p/6911834.html 二维码 生成

 https://www.cnblogs.com/guokai870510826/p/6693928.html  //下载

页面代码:

 

  <template scope="scope">
            <div style="width: 100%;height: 0.7rem;">
              <div style="height: 0.2rem"></div>
              <el-popover
                ref="popover2"
                placement="bottom"
                title="二维码"
                trigger="click">
                <canvas id="canvas"></canvas>
              </el-popover>
              <el-tooltip content="二维码" placement="top" effect="light">
                <img v-popover:popover2 @click="useqrcode(scope.$index, scope.row)"
                     src="../../../static/img/erwwweima.png" height="20" width="20"/>
              </el-tooltip>
              <el-tooltip content="下载" placement="top" effect="light" style="margin-left: 30px">
                <img src="../../../static/img/xiazai.png" @click="download(scope.$index, scope.row)" height="20" width="20"/>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" effect="light" style="margin-left: 30px">
                <img @click="deleteTableNo(scope.$index, scope.row)" src="../../../static/img/delete.png" height="20"
                     width="20"/>
              </el-tooltip>
            </div>
          </template>

事件代码:

 

 

      useqrcode(index, row){
        //生成的二维码内容，可以添加变量
        let canvas = document.getElementById('canvas');
        this.QRCodeLogin.tableNumber = row.cb_table_no;
        this.QRCodeLogin.cb_store_id = row.cb_store_id;
//        console.log(this.QRCodeLogin.tableNumber+'桌号'+row.cb_store_id)
        this.$ajax.post(this.rootUrl + "/QRCodeLogin/getAuthMemberPraram.do", this.QRCodeLogin).then((response) => {
          this.QueryDetail = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="
            + response.data.appid + "&redirect_uri="
            + response.data.redirect_uri + "&response_type=code&scope="
            + response.data.scope + "&state="
            + response.data.state + "&component_appid=" + response.data.component_appid
            + '&tableNumber=' + row.cb_table_no + '&cb_store_id=' + row.cb_store_id;
          console.log(this.QueryDetail);
          QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
            console.log('success!');
          })
        });
      },

下载事件:

 

 

     download(index, row){
       let canvas = document.getElementById('canvas');
       this.QRCodeLogin.tableNumber = row.cb_table_no;
       this.QRCodeLogin.cb_store_id = row.cb_store_id;
//        console.log(this.QRCodeLogin.tableNumber+'桌号'+row.cb_store_id)
       this.$ajax.post(this.rootUrl + "/QRCodeLogin/getAuthMemberPraram.do", this.QRCodeLogin).then((response) => {
         this.QueryDetail = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="
           + response.data.appid + "&redirect_uri="
           + response.data.redirect_uri + "&response_type=code&scope="
           + response.data.scope + "&state="
           + response.data.state + "&component_appid=" + response.data.component_appid
           + '&tableNumber=' + row.cb_table_no + '&cb_store_id=' + row.cb_store_id;
         console.log(this.QueryDetail);
         QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
           console.log('success!');

           var data = canvas.toDataURL().replace("image/png", "image/octet-stream;");
           console.log(data);
           var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
           var filename= row.cb_table_no + ".png";  //文件名
           save_link.href = data;
           save_link.download = filename;
           console.log(save_link);

           var event = document.createEvent('MouseEvents');
           event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
           save_link.dispatchEvent(event);

         })
       });


  },