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

直接上代码

  <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.mzph.cn/news/704805.shtml

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

相关文章

【Vue】组件通信组件通信

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;JVM ⛺️稳中求进&#xff0c;晒太阳 组件通信 组件通信&#xff0c;就是指组件与组件之间的数据传递 组件的数据是独立的&#xff0c;无法直接访问其他组件的数据想用其他组件的数据--&…

网络编程中的问题总结

1、服务端重启后bind失败&#xff0c;因为TCP 套接字状态 TIME_WAIT 引起&#xff0c;该状态在套接字关闭后约保留 2 到 4 分钟。在 TIME_WAIT 状态退出之后&#xff0c;套接字被删除&#xff0c;该地址才能被重新绑定而不出问题。可以通过setsockopt()设置Socket描述符的选项S…

Qt5转Qt6笔记

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

Linux笔记--硬链接与软链接

一、硬链接 1.inode和block 文件包含两部分数据&#xff1a;文件属性和实际内容&#xff0c;属性放在inode中&#xff0c;实际内容放在data block中。还有个超级区块&#xff08;superblock&#xff09;记录整个文件系统的整体信息&#xff0c;包括inode和block的总量&#x…

大语言模型LLM分布式训练:大规模数据集上的并行技术全景探索(LLM系列03)

文章目录 大语言模型LLM分布式训练&#xff1a;大规模数据集上的并行技术全景探索&#xff08;LLM系列03&#xff09;1. 引言1.1 大语言模型&#xff08;LLM&#xff09;的重要性及其规模化挑战1.2 分布式训练策略的需求 2. 分布式训练基础原理2.1 并行计算的基本概念与分类 3.…

python 循环语句 while 循环

while循环 Python 编程中 while 语句用于循环执行程序&#xff0c;即在某条件下&#xff0c;循环执行某段程序&#xff0c;以处理需要重复处理的相同任务。其基本形式为&#xff1a; while 判断条件(condition)&#xff1a; 执行语句(statements)…… 执行语句可以是单个语句…

使用axios 封装大文件上传,支持断点续传的功能

使用 Axios 实现断点续传、重试、暂停、开始和上传进度功能 简介 在许多应用程序中&#xff0c;我们经常需要上传大文件。但是&#xff0c;由于网络连接不稳定或其他原因&#xff0c;上传过程可能会中断。为了解决这个问题&#xff0c;我们可以使用断点续传功能。断点续传允许…

[Docker 教学] 常用的Docker 命令

Docker是一种流行的容器化技术。使用Docker可以将数据科学应用程序连同代码和所需的依赖关系打包成一个名为镜像的便携式工件。因此&#xff0c;Docker可以简化开发环境的复制&#xff0c;并使本地开发变得轻松。 以下是一些必备的Docker命令列表&#xff0c;这些命令将在你下一…

UI学习-学习内容

教程网址1&#xff1a;UI 新手如何从设计规范中提升自己 推荐一下高质量的设计规范 满屏干货 语雀 B站地址1&#xff1a;新像素 UI 新手如何从设计规范中提升自己 推荐一下高质量的设计规范 满屏干货 UI设计培训_哔哩哔哩_bilibili 教程地址2&#xff1a;UI 新手成长经验分享…

golang学习6,glang的web的restful接口传参

1.get传参 //get请求 返回json 接口传参r.GET("/getJson/:id", controller.GetUserInfo) 1.2.接收处理 package controllerimport "github.com/gin-gonic/gin"func GetUserInfo(c *gin.Context) {_ c.Param("id")ReturnSucess(c, 200, &quo…

基于雷达影像的洪水监测技术方法详解

洪水发生时候大多数是阴雨天气&#xff0c;光学影像基本上拍不到有效影像。雷达影像这时候就能发挥其不受天气影像的优点。现在星载的雷达卫星非常多&#xff0c;如高分三号、陆探一号、海丝一号&#xff08;巢湖一号&#xff09;、哨兵1号等。本文以哨兵1号L1地距(GRD)产品来介…

2018-02-14 新闻内容爬虫【上学时做论文自己爬新闻数据,原谅我自己懒发的图片】

2018-02-14新闻内容爬虫【上学时做论文自己爬新闻数据&#xff0c;原谅我自己懒发的图片】资源-CSDN文库https://download.csdn.net/download/liuzhuchen/88878591爬虫过的站点&#xff1a; 1QQ新闻 1&#xff0c;准备爬取滚动新闻页面 2 通过F12 开发工具查找发现&#xff…

高性能 Kafka 及常见面试题

Kafka 是一种分布式的&#xff0c;基于发布/订阅的消息系统&#xff0c;原本开发自 LinkedIn&#xff0c;用作 LinkedIn 的事件流&#xff08;Event Stream&#xff09;和运营数据处理管道&#xff08;Pipeline&#xff09;的基础。 基础原理详解可见 Kafka 基本架构及原理 基础…

嵌入式驱动学习第一周——git的使用

前言 本文主要介绍git的使用&#xff0c;包括介绍git&#xff0c;gitee&#xff0c;以及使用gitee创建仓库并托管代码 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xf…

【C进阶】顺序表详解

文章目录 &#x1f4dd;线性表的概念&#x1f320; 顺序表&#x1f309;顺序表的概念 &#x1f320;声明--接口&#x1f309;启动&#x1f320;初始化&#x1f309;扩容&#x1f320;尾插&#x1f309; 打印&#x1f320;销毁&#x1f309; 尾删&#x1f320;头插&#x1f309;…

探索便捷办公新选择:ONLYOFFICE 桌面编辑器

目录 引言 1. ONLYOFFICE 桌面编辑器简介 2. 功能特点 2.1 多格式支持 2.2 实时协作编辑 2.3 兼容性与格式保持 2.4 丰富的编辑功能 3. 使用方法 3.1 下载安装 3.2 打开文档 3.3 编辑文档 3.4 保存和共享 4. 注意事项 4.1 版本更新 4.2 网络连接 4.3 安全性 5.…

FL Studio Producer Edition2024中文进阶版Win/Mac

FL Studio Producer Edition&#xff0c;特别是其【中文进阶版 Win/Mac】&#xff0c;是数字音乐制作领域中的一款知名软件。它为广大音乐制作人、声音工程师以及音乐爱好者提供了一个从音乐构思到最终作品发布的完整解决方案。这个版本特别为中文用户优化&#xff0c;并兼容W…

SpringBooot之RestTemplate接口返回多层泛型导致java.util.LinkedHashMap cannot be cast to异常

统一泛型返回对象 Data public class Res<T> implements Serializable {private static final long serialVersionUID 6558796578827818466L;private Integer code; //状态码private String msg; //返回消息private T data; //数据 }data里包裹的泛型对象假设是DZPJ D…

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

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

Centos7下安装ruby2.7.8环境、WPScan的安装及使用介绍

前一段自己搭建了一个基于Wordpress搭建的博客&#xff0c;为了测试一下博客网站是否存在漏洞&#xff0c;网上搜索了一下主要采用WPScan工具。它是一个针对 WordPress 核心、插件和主题的漏洞扫描器&#xff0c;它可以帮助网站管理员检查其 WordPress 站点是否存在已知的安全问…