Vue实现二维码的展示及下载

个人介绍

hello hello~ ,这里是 code袁~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹
在这里插入图片描述
🦁作者简介:一名喜欢分享和记录学习的在校大学生
💥个人主页:code袁
💥 个人QQ:2647996100
🐯 个人wechat:code8896

专栏导航

code袁系列专栏导航
1.毕业设计与课程设计:本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.微信小程序开发:本专栏从基础到入门的一系开发流程,并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.vue开发系列全程线路:本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨ 

在这里插入图片描述

在这里插入图片描述

1.安装qrcode的组件
npm i qrcode

下载好的话在 package.json中就有
在这里插入图片描述

2.单页页面引入
import QRCode from "qrcode";
3.生成二维码

1.注意生产二维码的这个方法为异步请求。其次传入的参数必须为字符串
2.其中getCode()方法中data为你要生成二维码的数据
3.通过data.toString();将data数据转化了字符串

//生产二维码
    async getCode(data) {
      try {
        // 将数值型数据转换为字符串类型
        const dataString = data.toString();
        const qrCodeData = await QRCode.toDataURL(dataString);
        return qrCodeData;
      } catch (error) {
        console.error("Error generating QR code:", error);
        // 可以根据具体情况进行错误处理,比如返回默认值或向用户显示错误信息
        return null;
      }
    },
4.传参函数
getList() {
      getSteat().then(async (res) => {
        console.log(res.data.data);
        let data = res.data.data.data;
        let qrImg = [];
        let qrCodePromises = data.map((item) => this.getCode(item.statusId));
        let qrCodes =  Promise.all(qrCodePromises);
        for (let i = 0; i < data.length; i++) {
          qrImg.push({
            id: data[i].id,
            img: qrCodes[i],
          });
        }
        this.qrImg = qrImg;
        this.tableData = data;
        setTimeout(() => {
          this.loading = false;
        }, 200);
      });
    },
5.实现的效果

在这里插入图片描述

5.下载二维码

其中downloadQRCode()函数中的url为要下载的文件的路径

//下载二维码
    downloadQRCode(url, name) {
      const link = document.createElement("a");
      link.href = url; //下载文件的url
      link.download = `自习室座位${name}.png`; // 下载的文件名可以自定义
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
6.下载二维码实现效果

在这里插入图片描述

🎉写在最后

🍻伙伴们,如果你已经看到了这里,觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦!手动码字,如有错误,欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/641614.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

amtlib.dll打不开怎么办?一键修复丢失amtlib.dll方法

电脑丢失amtlib.dll文件是什么情况&#xff1f;出现amtlib.dll打不开怎么办&#xff1f;这样的情况有什么解决方法呢&#xff1f;今天就和大家聊聊amtlib.dll文件同时教大家一键修复丢失amtlib.dll方法&#xff1f;一起来看看amtlib.dll文件丢失会有哪些方法修复&#xff1f; a…

新手做抖音小店应该注意哪些问题?怎么正确的做抖音小店?

大家好&#xff0c;我是电商花花。 我们想做好一家抖音小店&#xff0c;想长期持久的做好一家抖店&#xff0c;一定要注意下面这些问题&#xff0c;只有避开这些做店的坑&#xff0c;我们才能稳稳的出单&#xff0c;稳稳的赚钱。 做抖音小店不能无脑铺货&#xff0c;要做精细…

HarmonyOS 鸿蒙应用开发 - 创建自定义组件

开发者定义的称为自定义组件。在进行 UI 界面开发时&#xff0c;通常不是简单的将系统组件进行组合使用&#xff0c;而是需要考虑代码可复用性、业务逻辑与UI分离&#xff0c;后续版本演进等因素。因此&#xff0c;将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。 1、创…

SpringBoot3.x 整合 Spring AI

Spring AI 已经发布了一段时间&#xff0c;虽然推出的时候就被人说只是一个套了 API 的壳&#xff0c;但是作为 Spring 生态的一个开源项目&#xff0c;用它来结合到现有业务系统中还是一个比较好的方案&#xff0c;毕竟像笔者当初为了接入 OpenAI 的 API&#xff0c;还专门学了…

链路初始化和训练

一、总览 链路初始化和训练&#xff0c;由物理层进行控制&#xff0c;是一个基于硬件的过程。初始化设备的链路和端口&#xff0c;使得设备能够收发报文&#xff0c;在链路上正常通信。 在reset后由硬件自动启动完整的训练过程&#xff0c;并由LTSSM管理。 1 位锁定 训练开始…

【正点原子Linux连载】 第四十六章 M.2硬盘驱动实验摘自【正点原子】ATK-DLRK3568嵌入式Linux驱动开发指南

1&#xff09;实验平台&#xff1a;正点原子ATK-DLRK3568开发板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id731866264428 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第四十…

揭秘循环购模式:消费返利新玩法,引领电商新潮流

在当今的消费市场中&#xff0c;有一种商业模式引起了广大消费者的热烈讨论——那就是循环购模式。你可能会想&#xff0c;消费满千元就能得到两千元的福利&#xff0c;每天还能领取现金&#xff0c;这怎么可能呢&#xff1f;商家难道真的在“慷慨解囊”&#xff1f;今天&#…

7.2k star的万能视频解析下载插件

今天给大家介绍一个超级厉害的浏览器插件&#xff0c;可以解析各个平台网页视频——猫抓。 项目简介 猫抓&#xff08;cat-catch&#xff09; 是一款资源嗅探扩展插件&#xff0c;他能够帮助你筛选列出当前页面的资源。简单来说&#xff0c;当你打开任意一个带有视频的网页&a…

Vue3中为Ant Design Vue中table的checkbox加tooltip、popover

问题的产生 Vue版本&#xff1a;3.3.13 ant-design-vue 版本&#xff1a;3.x.x 在工作时遇到一个场景&#xff0c;需要在 ant-table 的 checkbox 被禁用的时候提示原因&#xff0c;但是在 ant-design-vue 文档中并没有发现有相关介绍。 首先我去看了issue中是否有提到相关问题…

【MATLAB源码-第214期】基于matlab的遗传算法GA最短路径路由优化算法仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 在现代网络通信和路径规划领域&#xff0c;最短路径路由优化算法是一项关键技术。它涉及在给定的网络拓扑中寻找从源点到目标点的最短或成本最低的路径。近年来&#xff0c;遗传算法&#xff08;GA&#xff09;因其出色的全局…

2024.05.18学习记录

1、Vue3 Composition API Vite jsx 2、react 基本使用、高级用法 3、刷题&#xff1a;回溯部分剩下的题目

轻松拿捏C语言——【字符串函数】的使用及模拟实现

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f389;创作不易&#xff0c;请多多支持&#x1f389; &#x1f308;感谢大家的阅读、点赞、收藏和关注&#x1f495; &#x1f339;如有问题&#xff0c;欢迎指正 感谢 目录 一、…

java学习四

Random 随机数 数组 静态初始化数组 数组在计算机中的基本原理 数组的访问 什么是遍历 数组的动态初始化 动态初始化数组元素默认值规则 Java内存分配介绍 数组在计算机中的执行原理 使用数组时常见的一个问题 案例求数组元素最大值 public class Test1 {public static void ma…

香蕉成熟度检测YOLOV8NANO

香蕉成熟度检测YOLOV8NANO&#xff0c;采用YOLOV8NANO训练&#xff0c;得到PT模型&#xff0c;然后转换成ONNX模型&#xff0c;让OEPNCV调用&#xff0c;从而摆脱PYTORCH依赖&#xff0c;支持C。python&#xff0c;安卓开发。能检测六种香蕉类型freshripe freshunripe overripe…

Home Credit - Credit Risk Model Stability

本篇是对Kaggle上Home Credit - Credit Risk Model Stability竞赛中的开源代码VotingClassifier Home Credit的解读。原链接在VotingClassifier Home Credit (kaggle.com)。 %%writefile script.py import sys from pathlib import Path import subprocess import os import g…

LLM-Llama在 MAC M1上体验Llama.cpp和通义千问Qwen 1.5-7B

Llama.cpp的主要目标是在各种硬件上&#xff08;本地和云端&#xff09;实现LLM推断&#xff0c;同时保持最小的设置和最先进的性能。 纯C/C实现&#xff0c;没有任何依赖关系Apple芯片是一级的支持对象 - 通过ARM NEON、Accelerate和Metal框架进行优化对x86架构的AVX、AVX2和…

重学java 43.多线程 多等待多唤醒案例

Fear never builds the future,but hope does. —— 24.5.25 多等待多唤醒问题 在多条线程同时消费同时等待时&#xff0c;会出现问题 BaoZiPu package S77ThreadMoreWait;/*count和flag可以定义成包装类&#xff0c;但要记得给count和flag手动赋值不然对于本案例来说&#xff…

TCN 问题汇总

config 代码 import osemotion ["Valence"]### For preprocessing ### If tagged with "# Check this", then its adjustable, otherwise leave it alone. config {"extract_class_label": 1,"extract_continuous_label": 1,"…

Linux之DMA驱动详解(2)-sun6i-dma.c 驱动为例

一、DMA控制器硬件 1.1 DMA寄存器 DMA控制器 一般都会包含以下寄存器&#xff1a; DMA硬件描述符地址寄存器&#xff1a;存放 DMA描述符 的地址。DMA配置寄存器&#xff1a;配置 DMA 的 burst 、 width 、 传输方向 等属性。DMA使能寄存器&#xff1a;使能 DMA通道DMA中断状…

LLM 大模型学习必知必会系列(十一):大模型自动评估理论和实战以及大模型评估框架详解

LLM 大模型学习必知必会系列(十一)&#xff1a;大模型自动评估理论和实战以及大模型评估框架详解 0.前言 大语言模型&#xff08;LLM&#xff09;评测是LLM开发和应用中的关键环节。目前评测方法可以分为人工评测和自动评测&#xff0c;其中&#xff0c;自动评测技术相比人工…