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>

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

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

相关文章

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(20)-Fiddler精选插件扩展安装让你的Fiddler开挂到你怀疑人生

1.简介 Fiddler本身的功能其实也已经很强大了&#xff0c;但是Fiddler官方还有很多其他扩展插件功能&#xff0c;可以更好地辅助Fiddler去帮助用户去开发、测试和管理项目上的任务。Fiddler已有的功能已经够我们日常工作中使用了&#xff0c;为了更好的扩展Fiddler&#xff0c…

P4780 Phi的反函数

题目 思路 φ(x)n 当指数均为1时n最小 证明&#xff1a;容斥原理 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn1e9; int ansINT_MAX,n; bool f; map<int,bool> mp; bool is_prime(int n){if(n<1) return false;fo…

Spring事务创建与使用

目录 前言Spring中事务的实现声明式事务Transactional 作⽤范围Transactional 参数说明对于事务不回滚的解决方案 前言 在数据库中我们提到了 事务, 事务的定义为, 将一系列操作封装成一个整体去调用 , 要么一起成功, 要么一起失败 Spring中事务的实现 在Spring中事务的操作…

发npm包

重点文件 .github -> workflow -> .yml文件 发自己的包 新建dev分支&#xff0c;合并到master后自动执行 fork别人的包 fork -> base dev新建本地rebase-dev分支 -> 提交push后合并至dev -> dev合并至master后自动执行 值得注意的是&#xff0c;fork别人的…

flask 点赞系统

dianzan.html页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>点赞系统</title> </head> <body><h2>这是一个点赞系统</h2><table border"1"><…

学会Selenium元素定位

UI自动化测试的本质就是将手工测试的一系列动作转化成机器自动执行&#xff0c;可以简单概括为五大步骤&#xff1a;定位元素 - 操作元素 - 模拟页面动作 - 断言结果 - 生成报告。 所以很多同学在学习时&#xff0c;都是以元素定位作为入门导向&#xff0c;好的开始就是成功的…

【vue】vue-image-lazy图片懒加载使用与介绍【超详细+npm包源代码】

简介 当前插件是基于vue3&#xff0c;写的一个图片懒加载&#xff0c;文章最下方是npm包的源码&#xff0c;你可以自己拿去研究和修改&#xff0c;如有更好的想法可以留言&#xff0c;如果对你有帮助&#xff0c;可以点赞收藏和关注&#xff0c;谢谢。 后续会添加图片放大和切…

蓝桥云课ROS机器人旧版实验报告-07外设

项目名称 实验七 ROS[Kinetic/Melodic/Noetic]外设 成绩 内容&#xff1a;使用游戏手柄、使用RGBD传感器&#xff0c;ROS[Kinetic/Melodic/Noetic]摄像头驱动、ROS[Kinetic/Melodic/Noetic]与OpenCV库、标定摄像头、视觉里程计&#xff0c;点云库、可视化点云、滤波和缩…

shell脚本部署springboot

#!/bin/bashecho "$1 jar包名称&#xff0c;$2 运行环境 " echo "reload jar: $1 env: $2 " if [ -z $1 ];thenecho "请输入jar包名称......." elseecho "停止开始......."IDps -ef | grep "$1" | grep -v "grep"…

Ansible自动化运维工具 —— Playbook 剧本

playbooks 本身由以下各部分组成 &#xff08;1&#xff09;Tasks&#xff1a;任务&#xff0c;即通过 task 调用 ansible 的模板将多个操作组织在一个 playbook 中运行 &#xff08;2&#xff09;Variables&#xff1a;变量 &#xff08;3&#xff09;Templates&#xff1a;模…

【JVM】(一)深入理解JVM运行时数据区

文章目录 一、JVM 运行流程二、虚拟机栈&#xff08;线程私有&#xff09;三、本地方法栈 &#xff08;线程私有&#xff09;四、方法区&#xff08;元数据区&#xff09;五、堆&#xff08;线程共享&#xff09;六、程序计数器&#xff08;线程私有&#xff09; 一、JVM 运行流…

React性能优化之Memo、useMemo

文章目录 React.memo两种方式参数应用场景 拓展useMemouseMemo(calculateValue, dependencies) 参考资料 React.memo React 的渲染机制&#xff0c;组件内部的 state 或者 props 一旦发生修改&#xff0c;整个组件树都会被重新渲染一次&#xff0c;即时子组件的参数没有被修改&…

华为华三思科 交换机基础配置一览

console密码修改 华为 user-interface console 0 authentication-mode password set authentication password cipher XXXXXXXXX华三 line aux 0 authentication-mode password set auth pass simple XXX思科 en configure terminal line console 0 password 123 login忘记…

TypeScript基础学习

目录 一、安装 1、下载国内镜像 2、安装 3、查看安装情况 4、使用例子 二、变量声明 1、规则 2、声明的四种方式 3、注意 4、类型断言 5、类型推断 6、变量作用域 三、基础类型&#xff08;共11种&#xff09; 1、Any 类型 2、Null 和 Undefined 3、never 类型…

【备战csp-j】 csp常考题型详解(2)

二.计算机网络。 1. TCP/IP 协议共有( )层协议 。 A.3 B.4 C.5 D.6 答案&#xff1a;B 解析&#xff1a; 2.Ipv4 地址是由( ) 位二进制数码表示的。 A.16 B.32 C.24 D.8 答案&#xff1a;B 解析&#xff1a;IP地址是IP协议提供的一种统一的地址格式。在目前使用的IPv…

Linux - 进程控制(进程替换)

0.引入 创建子进程的目的是什么&#xff1f; 就是为了让子进程帮我执行特定的任务 让子进程执行父进程的一部分代码 如果子进程想执行一个全新的程序代码呢&#xff1f; 那么就要使用 进程的程序替换 为什么要有程序替换&#xff1f; 也就是说子进程想执行一个全新的程序代码&a…

k8s概念-Job和CronJob

回到目录 Job 对于非耐久性任务&#xff0c;比如压缩文件&#xff0c;任务完成后&#xff0c;pod需要结束运行&#xff0c;不需要pod继续保持在系统中&#xff0c;这个时候就要用到Job。 Job负责批量处理短暂的一次性任务 (short lived one-off tasks)&#xff0c;即仅执行一…

关于Linux中前端负载均衡之VIP(LVS+Keepalived)自动化部署的一些笔记

写在前面 整理一些 LVS 相关的笔记理解不足小伙伴帮忙指正 傍晚时分&#xff0c;你坐在屋檐下&#xff0c;看着天慢慢地黑下去&#xff0c;心里寂寞而凄凉&#xff0c;感到自己的生命被剥夺了。当时我是个年轻人&#xff0c;但我害怕这样生活下去&#xff0c;衰老下去。在我看来…

HCIP OSPF+BGP综合实验

题目 1、该拓扑为公司网络&#xff0c;其中包括公司总部、公司分部以及公司骨干网&#xff0c;不包含运营商公网部分。 2、设备名称均使用拓扑上名称改名&#xff0c;并且区分大小写。 3、整张拓扑均使用私网地址进行配置。 4、整张网络中&#xff0c;运行OSPF协议或者BGP协议…

Vue的标签<i>

在 Vue 中&#xff0c;<i> 标签用于表示图标&#xff08;Icon&#xff09;。它通常与图标字体或矢量图标库配合使用&#xff0c;用于展示不同的图标。<i> 标签是语义化的&#xff0c;用于表示图标的意义&#xff0c;而不仅仅是装饰性的。 在 Vue 中使用 <i>…