vue-qr 二维码 添加logo 下载单个二维码 批量下载二维码并打包

使用 vue-qr 生成二维码并可以添加logo

逻辑：
1、下载二维码生成插件 这里用的是qrcode
2、下载二维码 使用html2canvas(其实解释一个截图工具)将标签截图并下载下来
3、 如果是下载多个就是多生成多个二维码 然后使用循环截下过个图片 然后将图片放进压缩包里面 (JSZip)然后在进行下载

下载 ： npm install --save qrcode
引入 ： import vueQr from “vue-qr”
注册 ： components: { vueQr}

页面使用：

属性说明：
text = “二维码内容”
size=“二维码宽高大小，因为是正方形，所以设一个参数即可”
logoScale=“中间图的尺寸，不要设太大，太大会导致扫码失败的”
margin=“默认边距20px，不喜欢的话自己设为0”
colorDark =“实点的颜色，注意要和colorLight一起设置才有效”
colorLight =“空白的颜色，注意要和colorDark一起设置才有效”

添加logo这里提供一个可行的思路就是 将logo定位到二维码中间但是要注意的是不要把logo设置的太大有可能会出现失效

下载单个二维码：

使用html2canvas截图工具进行截图
npm install --save html2canvas
import html2canvas from “html2canvas”;

//下载二维码  这里的html2canvas其实就是把html标签进行截图转成图片进行下载的
	var qr = document.getElementById("qr")  //获取id为qr的标签
    html2CV(row) {
      setTimeout(() => {
        html2canvas(“这里填需要截图的标签，例如下载的标签id是qr直接就填写 qr”).then((resolve) => {
          let imgUrl = resolve.toDataURL("image/png"); //此时就得到了dom元素转成了base64的图片
          var a = document.createElement("a");
          var event = new MouseEvent("click");
          a.href = imgUrl;
          // 下载图名字
          a.download = row.restaurantName + row.name;
          // 合成函数，执行下载
          a.dispatchEvent(event);
        });
      }, 500);
    },

批量下载二维码并打包

其实方法还是一样的 就是逻辑不同和加了一个打包的步骤：

//这里通过循环的好很多的二维码 在通过定位 将"code-mar let:999999999;看不见的位置
 

      
 

//创建压缩包
    batchMONi() {
      var zip = new JSZip();
      var CodeDase64 = zip.folder("餐厅二维码"); //包名称
           this.list.forEach((e, index) => {
          this.$nextTick(() => {
              this.htmls(e, index, zip, CodeDase64);
          });
        
        });
        });
      } else {
        this.$message.error("请选择要生成的座号");
      }
    },
    
//下载多个
    htmls(row, index, zip, CodeDase64) {
    var htmlName = document.getElementsByClassName("code-mar"+index)
      setTimeout(() => {
        html2canvas(htmlName ).then((resolve) => {
          let imgUrl = resolve.toDataURL("image/png"); //此时就得到了dom元素转成了base64的图片
          const basePic = imgUrl.replace(/^data:image\/(png|jpg);base64,/, "");
          CodeDase64.file(row.restaurantName + row.name + ".png", basePic, {
            base64: true,
          });
          if (this.list.length - 1 === index) {
            zip
              .generateAsync({ type: "blob" }) // zip下载
              .then((content) => {
                loadingAll.close();
                saveAs(content, "二维码.zip"); // zip下载后的名字
              });
          }
        });
      }, 500);
    },

这里的代码可以参考 按照这个逻辑搞 完全没有问题 如果单纯的粘贴复制 运行不了的
这里的所有代码都是本人在项目中运用并实现出来的