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

1.安装 vue-qr组件:

javascript 复制代码
yarn vue-qr --save
或者
npm install vue-qr --save

2.页面挂载使用:(也可以在main.js全局挂载)

单页面引入:

javascript 复制代码
import vueQr from 'vue-qr';
export default {
	components: {
		vueQr
	},
}

3.全局挂载引入:

javascript 复制代码
import VueQr from 'vue-qr'
new Vue({
    components: {VueQr}
})

4.案列代码

4.1使用vue-qr并绑定ref,利用每条数据的id做区分

html 复制代码
<template>
  <div class="row wraps">
    <div
      class="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	二维码图像的外边距, 默认 20px
	 colorDark	实点的颜色
	 colorLight	空白区的颜色
	 bgSrc	欲嵌入的背景图地址
	 gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
	 backgroundColor	背景色
	 backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助
	 logoSrc	嵌入至二维码中心的 LOGO 地址
	 logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
	 logoMargin	LOGO 标识周围的空白边框, 默认为0
	 logoBackgroundColor	Logo 背景色,需要设置 logo margin
	 logoCornerRadius	LOGO 标识及其边框的圆角半径, 默认为0
	 whiteMargin	若设为 true, 背景图外将绘制白色边框
	 dotScale	数据区域点缩小比例,默认为0.35
	 autoColor	若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
	 binarizeThreshold	(0 < threshold < 255) 二值化处理的阈值
	 callback	生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
	 bindElement	指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE
	 -->

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

javascript 复制代码
<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>
相关推荐
一 乐1 小时前
学籍管理平台|在线学籍管理平台系统|基于Springboot+VUE的在线学籍管理平台系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习
昨天;明天。今天。1 小时前
案例-表白墙简单实现
前端·javascript·css
数云界1 小时前
如何在 DAX 中计算多个周期的移动平均线
java·服务器·前端
风清扬_jd1 小时前
Chromium 如何定义一个chrome.settingsPrivate接口给前端调用c++
前端·c++·chrome
安冬的码畜日常1 小时前
【玩转 JS 函数式编程_006】2.2 小试牛刀:用函数式编程(FP)实现事件只触发一次
开发语言·前端·javascript·函数式编程·tdd·fp·jasmine
ChinaDragonDreamer1 小时前
Vite:为什么选 Vite
前端
小御姐@stella1 小时前
Vue 之组件插槽Slot用法(组件间通信一种方式)
前端·javascript·vue.js
GISer_Jing1 小时前
【React】增量传输与渲染
前端·javascript·面试
GISer_Jing1 小时前
WebGL在低配置电脑的应用
javascript
eHackyd1 小时前
前端知识汇总(持续更新)
前端