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

  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-canvasQRCode.toCanvas(canvas, url, {width:120,height:120})var dataURL = canvas.toDataURL("image/png")const a = document.getElementById("saveLink")a.href = dataURLa.download = `二维码.png` // 报文到本地时的文件名称
}
</script>
  1. 演示
    在这里插入图片描述

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

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

相关文章

【算法与数据结构】654、LeetCode最大二叉树

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;【算法与数据结构】106、LeetCode从中序与后序遍历序列构造二叉树这两道题有些类似&#xff0c;相关代…

视频号如何做视频任务进行变现

上节给大家分享了在视频号中的视频如何挂橱窗商品链接进行变现 如果有不清楚的&#xff0c;可以看我上一条视频 以防失联&#xff0c;建议点赞&#xff0c;收藏&#xff0c;加关注 今天跟大家分享的是视频号如何做任务进行变现 只要参与视频号平台变现任务&#xff0c;一条视频…

固定资产管理怎么写报告

撰写固定资产管理报告时&#xff0c;需要考虑以下几个维度的数据&#xff1a;  资产总量和分类&#xff1a;列出公司的固定资产总量、种类以及各类型资产的数量。  资产使用情况&#xff1a;统计各类型资产的使用率、闲置率、报废率等数据&#xff0c;以及不同部门的资产使…

QT多线程

1.QT4.7以前的版本-----线程处理方式 1. 出现的警告 直接使用从UI—>转到槽&#xff0c;就会出现警告 2. 出现的错误 error: invalid operands of types QTimer* and void (QTimer::*)(QTimer::QPrivateSignal) to binary operator& 错误:无效的操作数类型’QTimer…

TikTok Shop启动东南亚跨境9.9大促,重要性类比“黑五”

TikTok Shop启动东南亚跨境9.9大促 据了解&#xff0c;TikTok Shop即将开启东南亚99大促活动&#xff0c;其重要程度可类比于“中国的双11”“美国的黑色星期五”等购物节日&#xff0c;且整合了包括马来西亚、新加坡、菲律宾、越南和泰国五个国家站点的大促资源、推出相关的流…

(15)线程的实例认识:同步,异步,并发,并发回调,事件,异步线程,UI线程

参看&#xff1a;https://www.bilibili.com/video/BV1xA411671D/?spm_id_from333.880.my_history.page.click&vd_source2a0404a7c8f40ef37a32eed32030aa18 下面是net framework版本 一、文件构成 1、界面如下。 (1)同步与异步有什么区别&#xff1f; …

ASP.NET Core 中基于 Controller 的 Web API

基于 Controller 的 Web API ASP.NET Wep API 的请求架构 客户端发送Http请求&#xff0c;Contoller响应请求&#xff0c;并从数据库读取数据&#xff0c;序列化数据&#xff0c;然后通过 Http Response返回序列化的数据。 ControllerBase 类 Web API 的所有controllers 一般…

Java 多线程系列Ⅳ(单例模式+阻塞式队列+定时器+线程池)

多线程案例 一、设计模式&#xff08;单例模式工厂模式&#xff09;1、单例模式2、工厂模式 二、阻塞式队列1、生产者消费者模型2、阻塞对列在生产者消费者之间的作用3、用标准库阻塞队列实现生产者消费者模型4、模拟实现阻塞队列 三、定时器1、标准库中的定时器2、模拟实现定时…

MLOps:掌握机器学习部署:Docker、Kubernetes、Helm 现代 Web 框架

介绍&#xff1a; 在机器学习的动态世界中&#xff0c;从开发模型到将其投入生产的过程通常被认为是复杂且多方面的。 然而&#xff0c;随着 Docker、Kubernetes 等工具以及 FastAPI、Streamlit 和 Gradio 等用户友好的 Web 框架的出现&#xff0c;这一过程变得比以往更加简化…

【知识积累】准确率,精确率,召回率,F1值

二分类的混淆矩阵&#xff08;预测图片是否是汉堡&#xff09; 分类器到底分对了多少&#xff1f; 预测的图片中正确的有多少&#xff1f; 有多少张应该预测为是的图片没有找到&#xff1f; 精确率和召回率在某种情况下会呈现此消彼长的状况。举个极端的例子&#xf…

Leetcode---360周赛

题目列表 2833. 距离原点最远的点 2834. 找出美丽数组的最小和 2835. 使子序列的和等于目标的最少操作次数 2836. 在传球游戏中最大化函数值 一、距离原点最远的点 这题主要是理解题意&#xff0c;遇到L往左走&#xff0c;遇到R往右走&#xff0c;遇到_左右都可以走&#x…

企业做微信小程序开发的好处

一、引言 在移动优先的时代&#xff0c;微信小程序为企业提供了新的营销方式和用户交互方式。微信小程序具有轻便、易用、可跨平台等特性&#xff0c;使得企业可以快速触达广大用户。本文将详细探讨企业做微信小程序开发的好处。 二、微信小程序对企业的好处 增加品牌知名度&…

Weblogic SSRF【漏洞复现】

文章目录 漏洞测试注入HTTP头&#xff0c;利用Redis反弹shell redis不能启动问题解决 Path : vulhub/weblogic/ssrf 编译及启动测试环境 docker compose up -dWeblogic中存在一个SSRF漏洞&#xff0c;利用该漏洞可以发送任意HTTP请求&#xff0c;进而攻击内网中redis、fastcgi…

Promise 解决 Vue 中父子组件的加载问题!

前言 关于Promie我这里就不多解释了&#xff0c;不懂得可以看看官方文档。下面文章重点介绍项目中遇到的问题解决方法。 需求 组件b初始化某个用到的库&#xff0c;只有在初始化完成后才能调用其API&#xff0c;不然会报错。a页面负责调用。 // a.vue <template><d…

1.网络空间搜素引擎

网络空间搜素引擎 https://cybermap.kaspersky.com/cn 世界所以带有ip的网络设备互联组成的空间叫做网络空间 地址 &#xff1a;shodan.io 简介 &#xff1a; 这句话还是有点东西得 。 区别&#xff1a; 平常得搜素引擎主要搜网页&#xff0c;shadan可以搜所以带有ip地址…

静态路由:配置和使用详解

文章目录 一、静态路由的配置和使用详解1. 配置要点1.1 点到点接口配置1.2 以太网接口配置 2. 默认路由3. 静态路由的配置命令4. 静态路由实现路由备份和负载分担 二、静态路由的优先级和比较1. 静态路由的优先级设置2. 静态路由与动态路由的比较2.1 静态路由优缺点2.2 动态路由…

Windows 安装 RabbitMq

Windows 上安装 RabbitMQ 的步骤 RabbitMQ 是一个强大的开源消息队列系统&#xff0c;广泛用于构建分布式、可扩展的应用程序。本教程将带您一步一步完成在 Windows 系统上安装 RabbitMQ 的过程。无需担心&#xff0c;即使您是初学者&#xff0c;也能够轻松跟随这些简单的步骤…

16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及Apache Hive示例(6)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

解决六大痛点促进企业更好使用生成式AI,亚马逊云科技顾凡采访分享可用方案

亚马逊云科技大中华区战略业务发展部总经理顾凡在接受21世纪经济报道记者专访时表示&#xff0c;生成式人工智能将从四个方面为企业带来机遇&#xff1a;第一是创造全新的客户体验&#xff1b;第二是提高企业内部员工的生产力&#xff1b;第三是帮助企业提升业务运营效率&#…

lement-ui 加载本地图片

实现图片展示时&#xff0c;发先本地的图片加载不了。 代码&#xff1a; <template><div><el-image src"../assets/logo.png" ></el-image></div> </template>结果发现不对&#xff0c;加载不出来&#xff0c;一查资料&#xf…