vue3 使用qrcodejs2-fix生成二维码并可下载保存

news2025/7/19 5:12:09

直接上代码

  <el-button @click=‘setEwm’>打开弹框二维码</el-button>
  <el-dialog v-model="centerDialogVisible" align-center >
 	<div class="code">
      <div class="content" id="qrCodeUrl" ref="qrCodeUrl"></div>
     </div>
     <div style="display:flex;justify-content:center">
        <el-button type="primary" @click="saveCode()" >保存二维码</el-button>
     </div>
     </el-dialog>
   <script>
   import QRCode from 'qrcodejs2-fix';
   export default {
   data(){
   return {
   		qrCode:''
   }
   }
   //生成二维码
   methods:{
   	//生成二维码
	   setEwm(){
	   this.centerDialogVisible=true
		   this.$nextTick(() => {
		        this.QRCode= new QRCode(this.$refs.qrCodeUrl, {
		          text: this.qrCode, // 需要转换为二维码的内容
		          width: 260, // 二维码的宽度
		          height: 260, // 二维码的高度
		          colorDark: "#000000", // 二维码的深色部分
		          colorLight: "#ffffff", // 二维码的浅色部分
		          correctLevel: QRCode.CorrectLevel.H, // 二维码的纠错水平
		        })
		      })
		 },
		 // 保存二维码
	    saveCode(name){
	      //获取二维码中格式为imag的元素
	      const nodeList = Array.prototype.slice.call(this.QRCode._el.children)
	        const img = nodeList.find((item) => item.nodeName.toUpperCase() === 'IMG')	
	        	// 选出图片类型
	        // 构建画布
	        let canvas = document.createElement('canvas');
	        canvas.width = img.width;
	        canvas.height = img.height;
	        canvas.getContext('2d').drawImage(img, 0, 0);
	        // 构造url
	        let url = canvas.toDataURL('image/png');
	        const a = document.createElement("a");
	        a.href = url;
	        a.download = `${name}医生二维码.png`;
	        // 触发a链接点击事件,浏览器开始下载文件
	        a.click();
	    },
	   }
   }
   </script>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

设计模式-结构型模式-组合模式

组合模式&#xff08;Composite Pattern&#xff09;&#xff1a;组合多个对象形成树形结构以表示具有“部分—整体”关系的层次结构。组合模式对单个对象&#xff08;即叶子对象&#xff09;和组合对象&#xff08;即容器对象&#xff09;的使用具有一致性&#xff0c;又可以称…

IT廉连看——Uniapp——页面样式与布局

IT廉连看——Uniapp——页面样式与布局 目标&#xff1a; 了解样式与布局的规范 熟记px和rpx的区别 全局样式与index样式的区别 一、查看uniapp框架简介——尺寸单位 px尺寸单位的使用是贯穿始终的。 [IT廉连看] 二、尺寸单位——实操效果 1、打开Hbuilder X并进入in…

Mycat核心教程--Mycat 监控工具【四】

Mycat核心教程--Mycat 监控工具 九、Mycat 监控工具9.1.Mycat-web 简介9.2.Mycat-web 配置使用9.2.1.ZooKeeper 安装【上面有】9.2.2.Mycat-web 安装9.2.2.1.下载安装包9.2.2.2.安装包拷贝到Linux系统/opt目录下&#xff0c;并解压9.2.2.3.拷贝mycat-web文件夹到/usr/local目录…

【MySQL面试复习】谈一谈你对SQL的优化经验

系列文章目录 在MySQL中&#xff0c;如何定位慢查询&#xff1f; 发现了某个SQL语句执行很慢&#xff0c;如何进行分析&#xff1f; 了解过索引吗&#xff1f;(索引的底层原理)/B 树和B树的区别是什么&#xff1f; 什么是聚簇索引&#xff08;聚集索引&#xff09;和非聚簇索引…

Spring篇----第九篇

系列文章目录 文章目录 系列文章目录前言一、@Qualifier 注解有什么用?二、@RequestMapping 注解有什么用?三、spring DAO 有什么用?四、列举 Spring DAO 抛出的异常。前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到…

C# paddlerocrsharp识别身份证号

https://gitee.com/raoyutian/paddle-ocrsharp 项目搭建 新建控制台项目 安装paddleocrsharp 下载训练好的模型 解压放到对应的文件夹中&#xff0c;都修改为如果较新则复制 编写代码OCRHelper.cs using PaddleOCRSharp;namespace OCRTest02;public class OCRHelper {//…

基于Springboot + Vue 母婴商城系统

末尾获取源码作者介绍&#xff1a;大家好&#xff0c;我是墨韵&#xff0c;本人4年开发经验&#xff0c;专注定制项目开发 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 二、开发技术与环…

【iOS ARKit】网络传输 ARWorldMap

ARKit 可以利用 ARWorldMap 在应用中断后进行状态恢复、继续AR 进程。一个用户也可以将ARWorldMap 发送给其他用户&#xff0c;当其他用户接收并加载 ARWorldMap 后&#xff0c;就可以在相同的物理环境看到同样的虚拟元素&#xff0c;达到共享 AR体验的目的。 在ARKit 中&#…

面试redis篇-10Redis集群方案-主从复制

在Redis中提供的集群方案总共有三种: 主从复制哨兵模式分片集群主从复制 单节点Redis的并发能力是有上限的,要进一步提高Redis的并发能力,就需要搭建主从集群,实现读写分离。 主从数据同步原理 Replication Id:简称replid,是数据集的标记,id一致则说明是同一数据集。每…

Python爬虫实战:从API获取数据

引言 在现代软件开发中&#xff0c;API已经成为获取数据的主要方式之一。API允许不同的软件应用程序相互通信&#xff0c;共享数据和功能。在本文中&#xff0c;我们将学习如何使用Python从API获取数据&#xff0c;并探讨其在实际应用中的价值。 目录 引言 二、API基础知识 …

Databend 开源周报第 133 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 了解对开放表格…

【漏洞复现】若依系统后台任意文件读取漏洞

Nx01 产品简介 若依系统&#xff08;RuoYi&#xff09;是一套基于SpringBoot的权限管理系统&#xff0c;核心技术采用Spring、MyBatis、Shiro&#xff0c;众多政府、企业采用它作为某些系统的权限管理后台&#xff0c;使用率较高。 Nx02 漏洞描述 若依系统后台存在任意文件读取…

CV论文--2024.2.27

1、Co-Supervised Learning: Improving Weak-to-Strong Generalization with Hierarchical Mixture of Experts 中文标题&#xff1a;共同监督学习&#xff1a;通过专家的分层混合提高弱到强的泛化能力 简介&#xff1a;本文提出了一种新的方法来解决在互联网规模数据预训练的…

c入门第二十三篇: 学生成绩管理系统优化(支持远程操作)

前言 师弟高兴的说道&#xff1a;“师兄&#xff0c;你猜我今天上课看见谁了&#xff1f;” 我&#xff1a;“谁呢&#xff1f;” 师弟&#xff1a;“程夏&#xff0c;没想到&#xff0c;她竟然来旁听我们计算机系的课程了。虽然我从前门进去的&#xff0c;但是我还是一眼就看…

Rider 2023:打造高效.NET项目的智能IDE,让开发更简单mac/win版

JetBrains Rider 2023激活版下载是一款专为.NET开发者打造的强大集成开发环境&#xff08;IDE&#xff09;。这款IDE提供了丰富的功能&#xff0c;旨在帮助开发者更快速、更高效地编写、调试和测试.NET应用程序。 Rider 2023 软件获取 Rider 2023在保持了其一贯的智能代码补全…

解决若依的分页失效问题

解决若依的分页失效问题 我的迷茫和胆怯也一直都在&#xff0c;但我告诉自己&#xff0c;就算是万丈深渊&#xff0c;走下去&#xff0c;也是前程万里。——木心《素履之往》 首先&#xff0c;我们根据若依的文档来清楚几个问题&#xff1a; 前端采用基于bootstrap的轻量级表格…

亿道丨三防平板丨如何从多方面选择合适的三防加固平板?

在如今这个信息爆炸的时代&#xff0c;移动设备已经成为我们生活和工作的必备工具。然而&#xff0c;在一些特殊的场合中&#xff0c;普通的平板电脑可能无法满足需求&#xff0c;比如工厂车间、野外作业、极端天气等环境下。此时&#xff0c;三防平板就成了不二之选。那么&…

Qt5转Qt6笔记

背景 现在的主程序和扩展的dll库都是qt5环境下编译发布的。但是想以后用qt6。所以考虑是否能够在qt5中兼容qt6的动态链接库进行加载。于是...就开始吧 开始 2024-02-23 安装好qt6后&#xff0c;在vs2019中需要新增qt6版本的安装路径。目录在&#xff1a;扩展->QT VS Tools…

Window系统本地搭建LightPicture网站并实现远程上传下载本地图片

文章目录 1.前言2. Lightpicture网站搭建2.1. Lightpicture下载和安装2.2. Lightpicture网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的手机越来越先进&#xff0c;功能也越来越多&#xff0c;而手机…

pytorch -- torch.nn网络结构

1. 官网描述 官网 使用 torch.nn 模块&#xff0c;我们可以创建自定义的神经网络模型&#xff0c;并使用 PyTorch 提供的优化器&#xff08;如 torch.optim&#xff09;和损失函数来训练和优化模型。 2. 常见结构 1.卷积操作 定义&#xff1a; 二维卷积 1.1版本 nn.functio…