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

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

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

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

页面使用：

<vue-qr  id="qr" :text="list" :size="580"  :logoScale="2"  :margin="10"  ></vue-qr>
<div class="logo"><div>

属性说明：
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;看不见的位置
<div  :class="'code-mar'+index"v-for="(item,index) in list":key="index">
<vue-qr:text="item.list":size="580":logoScale="40":margin="10":correctLevel="3":logoMargin="5"></vue-qr></div>//创建压缩包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);},

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