当前位置: 首页 > news >正文

Vue使用QrcodeVue生成二维码并下载

生成二维码

1、安装qrcode.vue组件

npm install --save qrcode.vue
<template><div id="app"><qrcode-vue :value='value' :size='size'></qrcode-vue><br /></div>
</template><script>
//导入组件
import QrcodeVue from 'qrcode.vue'
export default {name: 'App',data() {return {value: '扫我!', //二维码内容size: 300, //二维码大小}},//导入组件components: {QrcodeVue,},
}
</script>

下载二维码

使用a标签的download实现下载功能。

<template><div id="app"><qrcode-vue :value='value' :size='size'></qrcode-vue><br /><button v-on:click="download()" id="download">下载</button></div>
</template><script>
import QrcodeVue from 'qrcode.vue'
export default {name: 'App',data() {return {value: '别扫我!',size: 300,}},components: {QrcodeVue,},methods: {download() {//获取canvas标签let canvas = document.getElementById('app').getElementsByTagName('canvas')//创建a标签let a = document.createElement('a')//获取二维码的url并赋值为a.hrefa.href = canvas[0].toDataURL('img/png')//设置下载文件的名字a.download = '二维码'//点击事件,相当于下载a.click()//提示信息this.$message.warn('下载中,请稍后...')},},
}
</script>

相关文章:

Vue使用QrcodeVue生成二维码并下载

生成二维码 1、安装qrcode.vue组件 npm install --save qrcode.vue<template><div id"app"><qrcode-vue :valuevalue :sizesize></qrcode-vue><br /></div> </template><script> //导入组件 import QrcodeVue fro…...

“用户登录”测试用例总结

前言&#xff1a;作为测试工程师&#xff0c;你的目标是要保证系统在各种应用场景下的功能是符合设计要求的&#xff0c;所以你需要考虑的测试用例就需要更多、更全面。鉴于面试中经常会问“”如何测试用户登录“”&#xff0c;我们利用等价类划分、边界值分析等设计一些测试用…...

适应于Linux系统的三种安装包格式 .tar.gz、.deb、rpm

deb、rpm、tar.gz三种Linux软件包的区别 rpm包-在红帽LINUX、SUSE、Fedora可以直接进行安装&#xff0c;但在Ubuntu中却无法识别&#xff1b; deb包-是Ubuntu的专利&#xff0c;在Ubuntu中双击deb包就可以进入自动安装进程&#xff1b; tar.gz包-在所有的Linux版本中都能使用…...

Linux lvs负载均衡

LVS 介绍&#xff1a; Linux Virtual Server&#xff08;LVS&#xff09;是一个基于Linux内核的开源软件项目&#xff0c;用于构建高性能、高可用性的服务器群集。LVS通过将客户端请求分发到一组后端服务器上的不同节点来实现负载均衡&#xff0c;从而提高系统的可扩展性和可…...

Tomcat 创建https

打开CMD,按下列输入 keytool -genkeypair -alias www.bo.org -keyalg RSA -keystore d:\ambition.keystore -storetype pkcs12 输入密钥库口令:123456 再次输入新口令:123456 您的名字与姓氏是什么? [Unknown]: www.ambition.com 您的组织单位名称是什么? [Unknown…...

超导电性的基本现象和相关理论

超导体 Hg 超导电性的基本现象和相关理论 超导体的基本特性 低温零电阻突变&#xff08;< 10^{-23 \Omega/m}&#xff09; 良导体在 10^{-10} \Omega/m临界温度迈斯纳效应 完全排磁通效应&#xff08;完全抗磁性&#xff09; 超导体物体内部不存在电场 第一类超导体与第二类…...

在 PHP 中单引号(‘ ‘)和双引号(“ “)用法的区别

在 PHP 中&#xff0c;使用单引号&#xff08; &#xff09;和双引号&#xff08;" "&#xff09;可以创建字符串。这两种引号的用法有一些区别。 单引号&#xff1a; 单引号用于创建简单的字符串&#xff0c;其中的变量和转义字符将不会被解析。单引号中的任何内容…...

SpringCloudAlibaba:服务网关之Gateway的cors跨域问题

目录 一&#xff1a;解决问题 二&#xff1a;什么是跨域 三&#xff1a;cors跨域是什么&#xff1f; 一&#xff1a;解决问题 遇到错误&#xff1a; 前端请求时报错 解决&#xff1a; 网关中添加配置文件&#xff0c;注意springboot版本&#xff0c;添加配置。 springboo…...

react中的高阶组件理解与使用

一、什么是高阶组件&#xff1f; 其实就是一个函数&#xff0c;参数是一个组件&#xff0c;经过这个函数的处理返回一个功能增加的组件。 二、代码中如何使用 1&#xff0c;高级组件headerHoc 2&#xff0c;在普通组件header中引入高阶组件并导出高阶组件&#xff0c;参数是普…...

“从零开始学习Spring Boot:构建高效的Java应用程序“

标题&#xff1a;从零开始学习Spring Boot&#xff1a;构建高效的Java应用程序 摘要&#xff1a;本篇博客将带你从零开始学习如何使用Spring Boot构建高效的Java应用程序。我们将讨论Spring Boot的基本概念和特性&#xff0c;并提供一个简单的示例代码来帮助你入门。 正文&am…...

容器部署jenkins定时构建于本地时间不一致

1. Dockerfile FROM jenkins/jenkins:2.411-jdk11 USER root #以下生成密钥方式为旧格式&#xff0c;因为新格式暂不能被"Publish over SSH--->Jenkins SSH Key"功能识别 RUN ssh-keygen -q -m PEM -t rsa -b 2048 -N -f /root/.ssh/id_rsa ADD ./apache-maven…...

生成指定网段的IP字典自动化脚本

目录 1.前言 2.生成指定网段的IP字典自动化脚本 1.前言 在可回显的服务端跨站请求伪造(SSRF)漏洞中,我们通常会利用该漏洞进行内网资产探测。最近正好碰到了。写了一个小脚本。 2.生成指定网段的IP字典自动化脚本 脚本可指定协议、IP段、和端口生成字典。 get-Intranet-A…...

Java版工程行业管理系统源码-专业的工程管理软件- 工程项目各模块及其功能点清单 em

&#xfeff; Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下&#xff1a; 首页 工作台&#xff1a;待办工作、消息通知、预警信息&#xff0c;点击可进入相应的列表 项目进度图表&#xff1a;选择&#xff08;总体或单个&…...

《向量数据库指南》——大模型时代,为什么向量数据库成为标配?

目录 1. 数据持久化和低成本存储 2. 高性能查询 3. 数据分布 4. 易于使用 5. 稳定可用 6. 可运维可观测 7. 智能化 1. 数据持久化和低成本存储 许多单机和轻量级的向量数据库并没有关注数据的可靠性,Milvus Cloud 基于对象存储和消息队列的存储方案既通过存储计算分离…...

Pytorch个人学习记录总结 10

目录 优化器 优化器 官方文档地址&#xff1a;torch.optimhttps://pytorch.org/docs/stable/optim.html Debug过程中查看的grad所在的位置&#xff1a; model --> Protected Atributes --> _modules --> ‘model’ --> Protected Atributes --> _modules -…...

18款奔驰S320升级后排座椅加热功能,提升后排乘坐舒适性

奔驰座椅加热就简单多了&#xff0c;是在原车座椅海绵表面安装一层加热垫&#xff0c;加热垫里面是加热丝&#xff0c;通过电机热的原理&#xff0c;快速升温&#xff0c;把热量传递给车主。 奔驰的座椅加热系统是通过车门按键来控制&#xff0c;3档调节&#xff0c;温度从低到…...

Vue中的插值表达式

Vue中的插值表达式&#xff08;Interpolation&#xff09;用于将数据动态绑定到HTML模板中。它的主要作用是在模板中直接显示变量的值&#xff0c;并实现数据的双向绑定。以下是插值表达式的一些作用&#xff1a; 1.变量展示&#xff1a;插值表达式允许将Vue实例中的数据直接显…...

背包问题(模板)

目录 01背包&#xff1a; 完全背包&#xff1a; 多重背包&#xff08;范围0-100&#xff09;&#xff1a; 混合背包&#xff1a; 分组背包&#xff1a; 二维费用的背包问题&#xff1a; 背包问题求方案数&#xff1a; 01背包&#xff1a; 从最大容量开始遍历到当前&…...

docker容器创建私有仓库(第三篇)

目录 六、创建私有仓库 七、Docker资源限制 7.1、CPU使用率 7.2、CPU共享比例 7.3、CPU周期限制 7.4、CPU核心限制 7.5、CPU 配额控制参数的混合案例 7.6、内存限制 7.7、Block IO 的限制 7.8、限制bps 和iops 8、Docker数据持久化 8.1、数据持久化介绍 8.2、Volum…...

Eureka 学习笔记4:客户端 DiscoveryClient

版本 awsVersion ‘1.11.277’ DiscoveryClient # cacheRefreshTask // 配置shouldFetchRegistry if (clientConfig.shouldFetchRegistry()) {// 配置client.refresh.intervalint registryFetchIntervalSeconds clientConfig.getRegistryFetchIntervalSeconds();// 配置expB…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...