QRCode vue 生成二维码并粘贴到剪贴板

第一步下载并引用包

npm install qrcode

import QRCode from "qrcode";

注册 0.0 不注册也可以 嘿嘿嘿

components:{
         QRCode,
    },

写一个放二维码的视图

<canvas id="QRCode" ref="qrCodeDiv" v-show="!copyImgStatu"></canvas>
<img v-show="copyImgStatu" style="width:200px;height:200px;" class="imgss" id="img" />

写一个生成二维码的方法

toCodeShow: function () {
			获取视图元素
            var canvas = document.getElementById('QRCode')
                // canvas.setAttribute
                将二维码绘制到元素上
                QRCode.toCanvas(canvas, this.location, function (error) {
                    if (error) console.error(error)
                        console.log('success!');
                    })

            },

上面那个步骤完成之后，二维码就已经在视图上了，接下来是复制到粘贴板

增加一个复制按钮

<el-button size="small" @click="saveCodePic" type="primary">复制图片</el-button >

复制按钮的方法

// 复制二维码
    saveCodePic() {
      let that = this;
      //建一个空的文件
      var formdata = new FormData();
      //获取DOM元素
      let canvas = document.getElementsByTagName("canvas");
      //将图片保存成PNG的格式,这个是canvas自带的一个方法
      var qrCode = this.saveAsPNG(canvas);
      //此处是将图片以base64的格式保存到文件里面
      formdata.append("file", this.dataURLtoFile(qrCode, "try"));
      //上传图片到后台
      updateImg(formdata).then(res => {
        if (res.data.code == 200) {
        //获取图片的地址
          let srcTxt = res.data.object;
          var imgs = document.getElementsByClassName("imgss")[this.pos];
          //将地址放到视图img上
          imgs.src = srcTxt;
          //这个是将图片显示出来,隐藏canvas
          that.copyImgStatu = true;
          //给imgs赋予可编辑的属性,具体自己百度contenteditable 
          imgs.contenteditable = true;
          
          that.SelectText(imgs); //取第一位   this调用了实例上的东西
          document.execCommand("Copy");
          window.getSelection().removeAllRanges();
          imgs.removeAttribute("contenteditable");
          this.$message({
            message: "二维码已复制",
            type: "success"
          });
        } else {
          this.$message({
            message: res.data.message,
            type: "error"
          });
        }
      });
    },
// 保存成png格式的图片
    saveAsPNG(canvas) {
      return canvas.toDataURL("image/png");
    },
 //将base64转换为文件
			dataURLtoFile(dataurl, filename) { 
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);    
				while(n--) {        
					u8arr[n] = bstr.charCodeAt(n);      
				}  
				return new File([u8arr], filename, {
					type: mime
				});		    
	},
	SelectText(element) {
				var doc = document;
				if(doc.body.createTextRange) {
					var range = document.body.createTextRange();
					range.moveToElementText(element);
					range.select();
				} else if(window.getSelection) {
					var selection = window.getSelection();
					var range = document.createRange();
					range.selectNode(element);
					selection.removeAllRanges();
          selection.addRange(range);
          // console.log(selection)
					
				}
		},

问题一

扫描之后出现的是网址，没有自动打开网页

解决方法： 在地址前面加上https:// 或者 http://