vue+vue-qr生成带logo的二维码并自动下载

1.安装 vue-qr组件：

yarn vue-qr --save
或者
npm install vue-qr --save

2.页面挂载使用：（也可以在main.js全局挂载）

单页面引入:

import vueQr from 'vue-qr';
export default {components: {vueQr},
}

3.全局挂载引入:

import VueQr from 'vue-qr'
new Vue({components: {VueQr}
})

4.案列代码
4.1使用vue-qr并绑定ref，利用每条数据的id做区分

<template><div class="row wraps"><divclass="column center"style="margin:12px;"v-for="(row, index) in qrcodeList":key="index"><vue-qr:ref="'qrCode' + row.id":logoSrc="require('../assets/room-logo.png')":text="`${row.frontUrl}?id=${row.id}&bizCode=${row.bizCode}&serialNum=${row.serialNum}`":size="800":correctLevel="2"></vue-qr><div>{{ row.id }}</div></div></div>
</template><!--  ！！！！配置属性！！！！text	编码内容correctLevel	容错级别size	尺寸, 长宽一致, 包含外边距margin	二维码图像的外边距, 默认 20pxcolorDark	实点的颜色colorLight	空白区的颜色bgSrc	欲嵌入的背景图地址gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能backgroundColor	背景色backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助logoSrc	嵌入至二维码中心的 LOGO 地址logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2logoMargin	LOGO 标识周围的空白边框, 默认为0logoBackgroundColor	Logo 背景色,需要设置 logo marginlogoCornerRadius	LOGO 标识及其边框的圆角半径, 默认为0whiteMargin	若设为 true, 背景图外将绘制白色边框dotScale	数据区域点缩小比例,默认为0.35autoColor	若为 true, 图像将被二值化处理, 未指定阈值则使用默认值binarizeThreshold	(0 < threshold < 255) 二值化处理的阈值callback	生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)bindElement	指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE-->

4.2.注册对应组件并调用接口使用for循环进行二维码下载，由于谷歌浏览器下载文件限制每次只能下载10个文件，所以使用setTimeout计时器延时下载

<script>
import vueQr from "vue-qr";
import { getQrCodeList } from "../request/api";
export default {components: {vueQr,},data() {return {qrCodeObj: {bizCode: "sjz_hth_20240501",// bizCode: "test_hte_0501",pageNum: 15,pageSize: 200,},qrcodeList: [],};},created() {this.getQrCodeList();},methods: {//获取二维码列表getQrCodeList() {getQrCodeList(this.qrCodeObj).then((res) => {this.qrcodeList = res.rows;this.$nextTick(() => {this.downloadBatch(0); // 从第一个文件开始下载});});},downloadBatch(startIndex) {const batchSize = 10; // 每批次下载的文件数量const endIndex = Math.min(startIndex + batchSize, this.qrcodeList.length);for (let i = startIndex; i < endIndex; i++) {// 检查引用是否存在if (this.$refs["qrCode" + this.qrcodeList[i].id]) {setTimeout(() => {this.download(this.qrcodeList[i].id);}, 2000); // 设置一个延迟时间}}// 如果还有文件需要下载，则延迟一段时间后继续下载if (endIndex < this.qrcodeList.length) {setTimeout(() => {this.downloadBatch(endIndex);}, 5000); // 设置一个延迟时间}},download(sourceName) {// 下载const iconUrl = this.$refs["qrCode" + sourceName][0].$el.src;const a = document.createElement("a"); // 自定义a标签a.download = sourceName;a.href = iconUrl;a.click(); // 直接触发点击事件下载文件},},
};
</script>