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

news/发布时间2024/5/15 13:05:41

直接上代码

  <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=truethis.$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);// 构造urllet url = canvas.toDataURL('image/png');const a = document.createElement("a");a.href = url;a.download = `${name}医生二维码.png`;// 触发a链接点击事件,浏览器开始下载文件a.click();},}}</script>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程老四网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

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

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

免费享受企业级安全:雷池社区版WAF,高效专业的Web安全的方案

网站安全成为了每个企业及个人不可忽视的重要议题。 随着网络攻击手段日益狡猾和复杂&#xff0c;选择一个强大的安全防护平台变得尤为关键。 推荐的雷池社区版——一个为网站提供全面安全防护解决方案的平台&#xff0c;它不仅具备高效的安全防护能力&#xff0c;还让网站安…

2024.2.29 模拟实现 RabbitMQ —— 项目展示

目录 项目介绍 核心功能 核心技术 演示直接交换机 演示扇出交换机 演示主题交换机 项目介绍 此处我们模拟 RabbitMQ 实现了一个消息队列服务器 核心功能 提供了 虚拟主机、交换机、队列、绑定、消息 概念的管理九大核心 API 创建队列、销毁队列、创建交换机、销毁交换机、…

能碳双控| AIRIOT智慧能碳管理解决方案

在当前全球气候变化和可持续发展的背景下&#xff0c;建设能碳管理平台成为组织迎接挑战、提升可持续性的重要一环&#xff0c;有助于组织实现可持续发展目标&#xff0c;提高社会责任形象&#xff0c;同时适应未来碳排放管理的挑战。能碳管理是一个涉及跟踪、报告和减少组织碳…

pikachu靶场-RCE

介绍&#xff1a; RCE(remote command/code execute)概述 RCE漏洞&#xff0c;可以让攻击者直接向后台服务器远程注入操作系统命令或者代码&#xff0c;从而控制后台系统。 远程系统命令执行 一般出现这种漏洞&#xff0c;是因为应用系统从设计上需要给用户提供指定的远程命…

详解顺序结构滑动窗口处理算法

&#x1f380;个人主页&#xff1a; https://zhangxiaoshu.blog.csdn.net &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️&#xff0c;如有错误敬请指正! &#x1f495;未来很长&#xff0c;值得我们全力奔赴更美好的生活&…

Another Redis Desktop Manager工具连接集群

背景&#xff1a;使用Another Redis Desktop Manager连接redsi集群 win10安装 使用 下载 某盘&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1dg9kPm9Av8-bbpDfDg9DsA 提取码&#xff1a;t1sm 使用

(っ•̀ω•́)っ 如何在PPT中为文本框添加滚动条

本人在写技术分享的PPT时&#xff0c;遇到问题&#xff1a;有一大篇的代码&#xff0c;如何在一张PPT页面上显示&#xff1f;急需带有滚动条的文本框&#xff01;百度了不少&#xff0c;自己也来总结一篇&#xff0c;如下&#xff1a; 1、找到【文件】-【选项】 2、【自定义功…

Java面试笔记

Java面试笔记 Java面试笔记-网络模块 TCP的三次握手 TCP的简介&#xff1a; 面向连接的、可靠的、基于字节流的传输层通信协议 将应用层的数据流分割成报文段并发送给目标节点的TCP层 数据包都有序号&#xff0c;对方收到则发送ACK确认&#xff0c;未收到则重传 使用校验和来…

嵌入式Qt 实现用户界面与业务逻辑分离

一.基本程序框架一般包含 二.框架的基本设计原则 三.用户界面与业务逻辑的交互 四.代码实现计算器用户界面与业务逻辑 ICalculator.h #ifndef _ICALCULATOR_H_ #define _ICALCULATOR_H_#include <QString>class ICalculator { public:virtual bool expression(const QSt…

嵌入式中逻辑分析仪基本操作方法

前期准备 1.一块能触摸的屏对应的主板机 2.逻辑分析仪对应的软件工具 3.对应的拓展板 4.确定拓展板的引脚分布情况 第一步&#xff1a;逻辑分析仪j基本操作 1.数据捕捉需要先进行对应软件安装,并按照需求进行配置 2.这里以A20为例:此手机使用显示驱动芯片CST148,触摸屏分辨…

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

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

【c语言】字符函数和字符串函数(下)

前言 书接上回 【c语言】字符函数和字符串函数(上) 上一篇讲解的strcpy、strcat、strcmp函数的字符串长度是不受限制的 而本篇strncpy、strncat、strcnmp函数的字符串长度是受限制的 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;…

2024年Apache DolphinScheduler RoadMap:引领开源调度系统的未来

非常欢迎大家来到Apache DolphinScheduler社区&#xff01;随着开源技术在全球范围内的快速发展&#xff0c;社区的贡献者 “同仁” 一直致力于构建一个强大而活跃的开源调度系统社区&#xff0c;为用户提供高效、可靠的任务调度和工作流管理解决方案。 在过去的一段时间里&…

Facebook的数字社交使命:连接世界的下一步

在数字化时代&#xff0c;社交媒体已成为人们生活的重要组成部分&#xff0c;而Facebook作为其中最具影响力的平台之一&#xff0c;一直以来都在努力履行着自己的使命——连接世界。然而&#xff0c;随着时代的变迁和技术的发展&#xff0c;Facebook正在不断探索着连接世界的下…

如何使用GAP-Burp-Extension扫描潜在的参数和节点

关于GAP-Burp-Extension GAP-Burp-Extension是一款功能强大的Burp扩展&#xff0c;该工具在getAllParams扩展的基础上进行了升级&#xff0c;该工具不仅可以帮助广大研究人员在安全审计过程中扫描潜在的参数&#xff0c;而且还可以搜索潜在的链接并使用这些参数进行测试&#…

论文阅读:《High-Resolution Image Synthesis with Latent Diffusion Models》

High-Resolution Image Synthesis with Latent Diffusion Models 论文链接 代码链接 What’s the problem addressed in the paper?(这篇文章究竟讲了什么问题&#xff1f;比方说一个算法&#xff0c;它的 input 和 output 是什么&#xff1f;问题的条件是什么) 这篇文章提…

热点参数流控(Sentinel)

热点参数流控 热点流控 资源必须使用注解 SentinelResource 编写接口 以及 热点参数流控处理器 /*** 热点流控 必须使用注解 SentinelResource* param id* return*/ RequestMapping("/getById/{id}") SentinelResource(value "getById", blockHandler …

【Android移动开发】Windows10平台安装Android Studio与人工智能算法模型部署案例

目录 一、Android Studio下载地址二、开发环境JDK三、开始安装Android Studio四、案例展示与搭建五、人工智能算法模型移动端部署案例参考 一、Android Studio下载地址 https://developer.android.google.cn/studio/install.html 电脑配置要求&#xff1a; 下载保存在指定文…

【算法与数据结构】463、LeetCode岛屿的周长

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;直接利用公式法&#xff0c;遇到一对相邻的陆地&#xff0c;总周长就减去2。那么周长公式为&#xff1…
推荐文章