vue 使用qrcode生成二维码并可下载保存

news2024/12/23 13:12:39
  1. 安装qrcode
npm install qrcode --save
  1. 代码

<template>
	<div style="display: flex; flex-direction: column; align-items: center; justify-content center;">
       <div>查看溯源码,<a id="saveLink" style="text-decoration:underline">点击保存</a></div>
       <canvas id="qrcode-canvas"></canvas>
     </div>
</template>
<script>
import QRCode from 'qrcode'
export default {
	return data(){
		url: "", //待生成二维码的data
	},
	mounted(){
		generateQRCode(this.url)
	}
}

generateQRCode(url) {
  const canvas = document.getElementById('qrcode-canvas') // 在模板中的canvas元素设置id为 qrcode-canvas
  QRCode.toCanvas(canvas, url, {width:120,height:120})
  var dataURL = canvas.toDataURL("image/png")
  
  const a = document.getElementById("saveLink")
  a.href = dataURL
  a.download = `二维码.png` // 报文到本地时的文件名称
}
</script>
  1. 演示
    在这里插入图片描述

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

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

相关文章

Ae 效果:CC Glue Gun

生成/CC Glue Gun Generate/CC Glue Gun CC Glue Gun&#xff08;CC 胶水枪&#xff09;可以用于生成仿佛由胶水枪绘制的线条或图案&#xff0c;它模拟了胶水枪绘制在不同表面上的纹理和反光效果。 CC Glue Gun 效果实质上是通过设置画笔笔触的位置来构成画笔描边路径&#xff…

ModaHub魔搭社区专访百度智能云李莅:向量数据库市场会不会更卷?

ModaHub魔搭社区:在当今的信息化时代,数据库技术已经渗透到了我们生活的各个角落。传统的关系型数据库在市场上的竞争已经非常激烈,据统计,市面上有数百种不同类型的数据库产品在竞争。那么,在未来,随着人工智能和大数据技术的发展,向量数据库市场会否也会陷入同样的激烈…

js中如何判断一个变量的数据类型?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐typeof 运算符⭐instanceof 运算符⭐Object.prototype.toString 方法⭐Array.isArray 方法⭐自定义类型检查⭐null 和 undefined 检查⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订…

ClickHouse进阶(七):Clickhouse数据查询-1

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术,IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &#x1f4cc;订阅…

RK3568-i2c-适配8010rtc时钟芯片

硬件连接 从硬件原理图中可以看出&#xff0c;rtc时钟芯片挂载在i2c3总线上&#xff0c;设备地址需要查看芯片数据手册。编写设备树 &i2c3 {status "okay";rx8010: rx801032 {compatible "epson,rx8010";reg <0x32>;}; };使能驱动 /kernel/…

NPM 常用命令(三)

目录 1、npm compltion 1.1 描述 2、npm config 2.1 常用命令 2.2 描述 set get list delete edit fix 2.3 配置 json global editor location long 3、npm dedupe 3.1 描述 3.2 配置 4、npm deprecate 4.1 命令使用 4.2 描述 4.3 配置 registry ot…

【huggingface】数据集及模型下载并保存至本地

目录 数据集ChnSentiCorppeoples_daily_ner 模型bert-base-chinesehfl/rbt3t5-baseopus-mt-zh-enChinese_Chat_T5_Base 环境&#xff1a;没有代理&#xff0c;无法访问部分国外网络 数据集 正常情况下通过load_dataset加载数据集&#xff1b;save_to_disk保存至本地&#xff1b…

佳作导读 | 《C++ Core Guidelines》

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 佳作导读 | 《C Core Guidelines》 《C Core Guidelines》由Bjarne Stroustrup和Herb Sutter等共同编写关于使用C编程语言的指南&#xff1b;旨在提供关于如何使用C进…

Linux常用命令——csplit命令

在线Linux命令查询工具 csplit 将一个大文件分割成小的碎片文件 补充说明 csplit命令用于将一个大文件分割成小的碎片&#xff0c;并且将分割后的每个碎片保存成一个文件。碎片文件的命名类似“xx00”&#xff0c;“xx01”。csplit命令是split的一个变体&#xff0c;split只…

如何在Win10系统上安装WSL(适用于 Linux 的 Windows 子系统)

诸神缄默不语-个人CSDN博文目录 本文介绍的方法不是唯一的安装方案&#xff0c;但在我的系统上可用。 文章目录 1. 视频版2. 文字版和代码3. 本文撰写过程中使用到的其他网络参考资料 1. 视频版 B站版&#xff1a;在Windows上安装Linux (WSL, 适用于 Linux 的 Windows 子系统…

【Rust 日报】2023-09-03 sudo-rs:sudo 和 su 的内存安全实现

sudo-rs&#xff1a;sudo 和 su 的内存安全实现 sudo-rs 项目通过以下方式改进了原始 sudo 的安全性&#xff1a; 使用内存安全语言&#xff08;Rust&#xff09;&#xff0c;因为估计原始 sudo 中三分之一的安全漏洞都与内存管理问题有关。省略不常用的功能&#xff0c;以减少…

记2个library cache lock故障case

第一个case 客户说晚上10点的时候做业务很卡&#xff0c;遂取对应时段awr 非常明显的library cache lock事件。这个事件是元数据锁&#xff0c;一旦泛滥对数据库的影响范围很大。 因此&#xff0c;他的泛滥第一时间应该想到会有大量持有元数据的动作。对sql进行检查 这个自动…

精益制造、质量管控,盛虹百世慧共同启动MOM(制造运营管理)

百世慧科技依托在电池智能制造行业中的丰富经验&#xff0c;与盛虹动能达成合作&#xff0c;为其提供MOM制造运营管理平台&#xff0c;并以此为起点&#xff0c;全面提升盛虹动能的制造管理水平与运营体系。 行业困境 中国动力电池已然发展为全球最大的电池产业&#xff0c;但…

【网络安全带你练爬虫-100练】第20练:数据处理-并写入到指定文档位置

目录 一、目标1&#xff1a;解码去标签 二、目标2&#xff1a;提取标签内内容 三、目标3&#xff1a;处理后的数据插入原位置 四、目标4&#xff1a;将指定的内容插入指定的位置 五、目标5&#xff1a;设置上下文字体格式 六、目标6&#xff1a;向多个不同位置插入不同的…

算法笔记:平衡二叉树

1 介绍 平衡二叉树&#xff08;AVL树&#xff09;是一种特殊的二叉搜索树&#xff08;BST&#xff09;&#xff0c;它自动确保树保持低高度&#xff0c;以便实现各种基本操作&#xff08;如添加、删除和查找&#xff09;的高效性能。 ——>时间都维持在了O(logN)它是一棵空…

网络安全—0基础入门学习手册

前言 一、什么是网络安全 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防…

windows下配置pcl-python

1.前提概要 python版本的pcl基本上只有3.6的能用&#xff0c;本人3.7/3.8均进行了尝试。 因为很多博主提到的Gtk已经下载不了了&#xff0c;实在是维护人员太懒了。如果你看到这里&#xff0c;可以试试下面这个链接&#xff0c;说不定又能用了呢。 Gtk下载&#xff1a;http:…

vmware网卡(网络适配器)桥接、NAT、仅主机3种模式解析

Bridged&#xff08;桥接模式&#xff09;、NAT&#xff08;网络地址转换模式&#xff09;、Host-Only&#xff08;仅主机模式&#xff09; Windows系统安装好vmware后&#xff0c;在网络连接中会生成VMnet1和VMnet8两个虚拟网卡。 VMnet1作用于仅主机模式&#xff0c;VMnet8作…

Java作业3

1.下面代码的运行结果是&#xff08;C&#xff09; public static void main(String[] args){String s;System.out.println("s"s);}A.代码编程成功&#xff0c;并输出”s” B.代码编译成功&#xff0c;并输出”snull” C.由于String s没有初始化&#xff0c;代码不…

Mqtt学习笔记--接入阿里云(2)

概述 在阿里云IoT平台中&#xff0c;MQTT协议是一种重要的连接方式&#xff0c;可以用于设备与平台之间的通信。通过配置设备的Topic和订阅规则&#xff0c;设备可以在平台上发布/订阅消息&#xff0c;实现设备状态的监控、控制和数据的传输。同时&#xff0c;阿里云IoT平台还提…