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

通过jr-qrcode生成二维码并下载到客户端本地(Vue)

生成二维码

首先生成二维码图片的地址

引入jr-qrcode

import jrQrcode from 'jr-qrcode';

生成二维码图片的地址

// 生成二维码地址
getQRCodeUrl(spreadUrl) {const QRCodeUrl = jrQrcode.getQrBase64(spreadUrl);return QRCodeUrl;
}
that.backUrl = jrQrcode.getQrBase64(data.backUrl)

 

展示二维码图片

<img :src="getQRCodeUrl('二维码内容')" alt="" />
<div><el-image fit="cover" :src="backUrl" style="width:175px; height: 175px" />
</div>

下载生成好的二维码图片到本地

// 下载二维码
uploadQRCode(spreadUrl) {const image = new Image();// 解决跨域 canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function() {const canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;const context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);//得到图片的base64编码数据const url = canvas.toDataURL("image/png");// 生成一个 a 标签const a = document.createElement("a");// 创建一个点击事件const event = new MouseEvent("click");// 将 a 的 download 属性设置为我们想要下载的图片的名称,若 name 不存在则使用'图片'作为默认名称a.download = name || "二维码";// 将生成的 URL 设置为 a.href 属性a.href = url;// 触发 a 的点击事件a.dispatchEvent(event);// return a;};image.src = this.getQRCodeUrl('二维码内容');
}

相关文章:

通过jr-qrcode生成二维码并下载到客户端本地(Vue)

生成二维码 首先生成二维码图片的地址 引入jr-qrcode import jrQrcode from jr-qrcode; 生成二维码图片的地址 // 生成二维码地址 getQRCodeUrl(spreadUrl) {const QRCodeUrl jrQrcode.getQrBase64(spreadUrl);return QRCodeUrl; }that.backUrl jrQrcode.getQrBase64(da…...

命令执行漏洞(附例题)

一.原理 应用有时需要调用一些执行系统命令的函数&#xff0c;如PHP中的system、exec、shell_exec、passthru、popen、proc_popen等&#xff0c;当用户能控制这些函数的参数时&#xff0c;就可以将恶意系统命令拼接到正常命令中&#xff0c;从而造成命令执行攻击。 二.利用条…...

iOS开发Swift-类型转换

1.Int或Double转字符串 let x 20 let y "\(x)" let z String(x)2.Double转Int(去掉小数点后面的) Int(1.9)3.Int转Double Double(1)4.向上转型 class A{//A父类 }class B: A{//B子类继承A }let a A() let b B()b as A //子类转化成父类5.向下转型 class A{//A…...

python基础爬虫反爬破解

文章目录 爬虫初识1. HTTP协议与WEB开发&#xff08;1&#xff09;简介&#xff08;2&#xff09;socket套接字&#xff08;3&#xff09;请求协议与响应协议 2. requests&反爬破解&#xff08;1&#xff09;UA反爬&#xff08;2&#xff09;referer反爬&#xff08;3&…...

Maven 必备技能:MAC 系统下 JDK和Maven 安装及环境变量配置详细讲解

开发中难免因系统问题或者版本变更反复折腾JDK和Maven环境变量&#xff0c;干脆写个笔记备忘个&#xff0c;也方便小伙伴们节省时间。 JDK安装与环境变量配置 1.官网下载jdk mac安装包: Java Downloads | Oracle " https://www.oracle.com/java/technologies/downloads…...

electron笔记无边框窗口、DLL调用、DLL函数返回指针

无边框 const win new BrowserWindow({width: 1290,height: 736,minHeight: 736,minWidth: 1040,maxHeight: 736,maxWidth: 1290,frame: false, // 无边框webPreferences: {// preload: process.env.WEBPACK_DEV_SERVER_URL ? __dirname /preload.js : app://./preload.js,…...

递归算法学习——黄金矿工,不同路径III

目录 ​编辑 一&#xff0c;黄金矿工 1.题意 2.题目分析 3.题目接口 4.解题思路及代码 二&#xff0c;不同路径III 1.题意 2.解释 3.题目接口 4.解题思路及代码 一&#xff0c;黄金矿工 1.题意 你要开发一座金矿&#xff0c;地质勘测学家已经探明了这座金矿中的资源…...

pg 创建分区表 --chatGpt

问&#xff1a;postgreSql 创建表 addresses&#xff08;id,mkey,pri,addr),其中 id自增且id值会超过上百亿&#xff0c;mkey长度为8且唯一的字符串&#xff0c;pri长度64的字符串,addr长度64的字符串,用散列分区的方式创建 gpt: 你可以使用 PostgreSQL 来创建一个包含散列分…...

长城网络靶场,第一题笔记

黑客使用了哪款扫描工具对论坛进行了扫描&#xff1f;&#xff08;小写简称&#xff09; 第一关&#xff0c;第三小题的答案是awvs 思路是先统计查询 然后过滤ip检查流量 过滤语句&#xff1a;tcp and ip.addr ip 114.240179.133没有 第二个101.36.79.67 之后找到了一个…...

el-form表单中不同数据类型对应的时间格式化和校验规则

1. 在表单中, 当选择不同的数据类型时, 需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化, 2. 但是当不按顺序选择数据类型后, 再选时间可能会报错, 所以需要在dom更新后, 再清空表单. 3. 校验规则, 结束时间需要大于开始时间, 但是不能选当前的…...

Python代码雨

系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595.blog.csdn.net/article/details/1295031234漂浮爱心https://want…...

java.util.Optional

原文链接 文章目录 1、Optional作用2、常用API构造相关get / orElse / orElseGet / orElseThrowisPresent / ifPresentfiltermap / flatMap 3、源码翻译 1、Optional作用 类位于&#xff1a;java.util.Optional臭名昭著的空指针异常是导致Java应用程序失败的最常见原因&#…...

微服务--Seata(分布式事务)

TCC模式在代码中实现&#xff1a;侵入性强&#xff0c;并且的自己实现事务控制逻辑 Try&#xff0c;Confirm() cancel() 第三方开源框架&#xff1a;BeyeTCC\TCC-transaction\Himly 异步实现&#xff1a;MQ可靠消息最终一致性 GlobalTransacational---AT模式...

发光太阳聚光器的蒙特卡洛光线追踪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

(涨知识)-圣诞灯串类产品出口都需要做哪些认证?

1. 首先我们讲讲欧盟&#xff0c; 欧盟一向都是合规要求特别多的一个国家&#xff0c;所以向欧盟出口灯串等电子产品&#xff0c;一定要长个心眼。废话不多说&#xff0c;进入正题吧&#xff01; ①欧盟产品安全&#xff1a;欧代CE(电磁指令EMC低压指令LVD)DOC 产品安全必备三件…...

ROS地图/像素坐标描点调试【Python源码实现】

文章目录 ROS python 地图描点调试工具1. Rviz描点1.1 需求描述1.2 visualization Marker1.3 工程实践 2. 静态地图图片描点2.1 需求描述2.2 工程实践 ROS python 地图描点调试工具 1. Rviz描点 1.1 需求描述 在ROS开发中&#xff0c;有时会加载图片文件转为地图载入move_ba…...

2023年7月京东笔记本电脑行业品牌销售排行榜(京东数据平台)

随着智能手机、平板电脑等移动互联设备的普及&#xff0c;人们对于个人电脑的依赖减轻&#xff0c;加之电脑的更换率较低&#xff0c;因此当前PC端消费市场整体出现疲态&#xff0c;笔记本电脑的出货量不断下降&#xff0c;今年7月份也同样呈现这一趋势。 根据鲸参谋电商数据分…...

用户忠诚度:小程序积分商城的用户保持方法

随着移动互联网的蓬勃发展&#xff0c;小程序积分商城已经成为了许多企业私域营销的热门选择。这个商城不仅可以吸引用户参与&#xff0c;还可以提高用户的忠诚度&#xff0c;进一步加深用户与品牌的互动关系。然而&#xff0c;要实现用户的忠诚度&#xff0c;需要一系列的策略…...

[前端] 使用lerna version更新版本号

lerna version 是一个用于管理 monorepo&#xff08;多包存储库&#xff09;的工具&#xff0c;它可以帮助您在多个相关包之间协调版本号的更新和发布。以下是使用 lerna version 更新版本号的一般步骤&#xff1a; 安装 Lerna&#xff1a; 首先&#xff0c;您需要在您的项目中…...

winform嵌入浏览器 webView2

1、项目引用nuget 2、winform窗体中初始化 var webView new WebView2();webView.Source new Uri(url);webView.Dock DockStyle.Fill;//接收js调用c#函数的消息webView.WebMessageReceived CoreWebView2_WebMessageReceivedAsync; this.panel1.Controls.Add(…...

通过 Langchain 框架实现 ChatGPT 的使用

一. 简介Langchain 框架&#xff1a;LangChain 是一个开源框架&#xff0c;是一个让大语言模型&#xff08;如ChatGPT&#xff09;能连接外部工具、记忆对话、执行复杂任务的“智能助手”开发框架&#xff0c;解决了LLM应用开发中的各种工程化问题。# LangChain 的核心定位&…...

费雪的竞争优势分析框架

费雪的竞争优势分析框架 关键词:费雪竞争优势分析框架、企业竞争优势、财务分析、行业分析、企业战略 摘要:本文深入探讨了费雪的竞争优势分析框架。该框架是评估企业竞争力的重要工具,通过多维度的分析帮助投资者和企业管理者判断企业在市场中的地位和发展潜力。文章首先介…...

微信小程序支付V3接口在ThinkPHP6中的封装实践:如何设计一个可复用的支付服务类?

微信小程序支付V3接口在ThinkPHP6中的高复用封装实践 微信支付作为小程序生态中最核心的商业化能力&#xff0c;其技术实现的质量直接影响着用户体验和系统稳定性。本文将分享如何在ThinkPHP6框架下&#xff0c;从零构建一个符合SOLID原则的支付服务类&#xff0c;实现一次封装…...

3分钟彻底搞定Axure RP汉化:免费中文语言包完整指南

3分钟彻底搞定Axure RP汉化&#xff1a;免费中文语言包完整指南 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包&#xff0c;不定期更新。支持 Axure 9、Axure 10。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在…...

4G DTU选型指南:Cat1模块在智能水电表项目中的7个关键参数对比

4G DTU选型实战&#xff1a;Cat1模块在智能水电表项目中的7个工程化参数解析 水电表远程抄表系统正经历从2G向4G Cat1的技术迁移浪潮。作为工业现场的核心通信枢纽&#xff0c;DTU模块的选型直接关系到数据上报成功率、设备维护成本和系统生命周期。本文将基于某省级电网改造项…...

当你的STM32F0没有VTOR:用SRAM重映射实现IAP升级的完整指南(附代码)

当你的STM32F0没有VTOR&#xff1a;用SRAM重映射实现IAP升级的完整指南&#xff08;附代码&#xff09; 在嵌入式开发中&#xff0c;IAP&#xff08;In-Application Programming&#xff09;功能对于远程固件更新至关重要。然而&#xff0c;当使用Cortex-M0内核的STM32F0系列芯…...

构建语音搜索引擎:FireRedASR Pro与Elasticsearch整合实践

构建语音搜索引擎&#xff1a;FireRedASR Pro与Elasticsearch整合实践 你有没有想过&#xff0c;对着手机说句话&#xff0c;就能从海量文档里精准找到你想要的信息&#xff1f;比如&#xff0c;在公司的知识库里&#xff0c;直接问“上季度华东区的销售数据报告在哪&#xff…...

CHORD-X构建自动化运维报告系统:服务器日志分析与日报生成

CHORD-X构建自动化运维报告系统&#xff1a;服务器日志分析与日报生成 最近和几个运维朋友聊天&#xff0c;发现他们每天都要花一两个小时写日报、周报。服务器状态、错误日志、性能趋势……这些数据分散在各个系统里&#xff0c;手动整理起来特别费劲。关键是&#xff0c;这种…...

文墨共鸣大模型入门指南:Ubuntu 20.04系统下的保姆级部署教程

文墨共鸣大模型入门指南&#xff1a;Ubuntu 20.04系统下的保姆级部署教程 想试试最近挺火的文墨共鸣大模型&#xff0c;但被复杂的部署步骤劝退了&#xff1f;别担心&#xff0c;这篇教程就是为你准备的。咱们今天不谈复杂的原理&#xff0c;就手把手教你&#xff0c;如何在Ub…...

大模型小白入门指南:从工作原理到实用技巧(收藏版)

本文深入解析了大语言模型&#xff08;LLM&#xff09;的核心工作原理&#xff0c;包括Transformer架构的自注意力机制和位置编码&#xff0c;以及预训练和指令微调的训练范式。同时&#xff0c;文章还提供了实用的提示工程技巧&#xff0c;帮助读者更好地与AI协作。此外&#…...