前端vue如何生成二维码

news2024/9/20 6:13:55

有时候有需要链接直接生成二维码在手机上看的需求,比如下载,比如信息,比如excel

下面先引入包

import QRCode from 'qrcode';

然后上代码


// 将res转换成二维码
  const qrCodeData = JSON.stringify(res); // 将res转换为字符串作为二维码数据

// 生成二维码图片
  const qrCodeCanvas = document.createElement('canvas');
  QRCode.toCanvas(qrCodeCanvas, "qrCodeData", { width: 200, height: 200 });

// 等待一段时间以确保二维码图片生成完成
  setTimeout(() => {
    // 将二维码图片转换为DataURL
    const qrCodeDataURL = qrCodeCanvas.toDataURL('image/png');

    // 创建一个下载链接
    const downloadLink = document.createElement('a');
    downloadLink.href = qrCodeDataURL;
    downloadLink.download = 'qrcode.png'; // 下载文件名为qrcode.png

    // 模拟点击下载链接
    downloadLink.click();
  }, 1000); // 等待1秒后执行下载操作

};

最终结果

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

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

相关文章

基于Springboot的水产养殖系统(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的水产养殖系统(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构&…

php7.4在foreach中对使用数据使用无法??[]判读,无法使用引用传递

代码如下图:这样子在foreach中是无法修改class_history的。正确的应该是去掉??[]判断。 public function actionY(){$array [name>aaa,class_history>[[class_name>一班,class_num>1],[class_name>二班,class_num>2]]];foreach ($array[class_…

系统思考—企业辅导咨询

从2004年、2014年到2024年,国九条政策的发布与变迁不仅影响了行业趋势,更深刻地改变了企业的风险预估和策略辅导。彼得杜鲁克曾经说过:“必须系统地抛弃旧知识。”这不仅是企业领导者的挑战,也是我们每个人的难题。难点不在于我们…

cesium教程

环境搭建 vscode安装Visual Studio Code - Code Editing. Redefined nodejs安装Node.js — Run JavaScript Everywhere cesium源码下载编译 cesium官网下载源码https://cesium.com/downloads/ 解压下载的源码 VsCode打开远吗,找到index.html,右键打开 Open wit…

开源博客项目Blog .NET Core源码学习(20:App.Hosting项目结构分析-8)

本文学习并分析App.Hosting项目中后台管理页面的个人资料页面、修改密码页面。 个人资料页面 个人资料页面用于显示和编辑个人信息,支持从本地上传个人头像。整个页面使用了layui中的表单、日期与时间选择、上传等样式或模块,通过layui.css文件设置样式…

案例-部门管理-删除

黑马程序员JavaWeb开发教程 文章目录 一、查看页面原型二、查看接口文档三、开发1、Controller2、Service(1)service接口层(3)service实现层 3、Mapper4、Postman 一、查看页面原型 二、查看接口文档 三、开发 1、Controller 因…

2022-2003年上市公司企业商业信用融资数据

01、数据简介 企业商业信用融资是指企业之间在买卖商品时,以商品形式提供的借贷活动。这种融资方式是经济活动中一种最普遍的债权债务关系。商业信用的存在对于扩大生产和促进流通起到了十分积极的作用,但不可避免的也存在着一些消极的影响。 测算方式…

【高校科研前沿】华东师大白开旭教授博士研究生李珂为一作在RSE发表团队最新成果:基于波谱特征优化的全球大气甲烷智能反演技术

文章简介 论文名称:Developing unbiased estimation of atmospheric methane via machine learning and multiobjective programming based on TROPOMI and GOSAT data(基于TROPOMI和GOSAT数据,通过机器学习和多目标规划实现大气甲烷的无偏估…

Linux系统安装Redis7(详细版)

Linux系统安装Redis7 一、windows安装redis二、Linux安装Redis下载redis编辑redis7.conf文件启动redis-server服务如何关闭redis服务设置Redis开机自启动 一、windows安装redis Window 下安装 下载地址:https://github.com/dmajkic/redis/downloads 下载到的Redi…

iOS 实现类似抖音翻页滚动效果

这里是效果图 参考抖音的滚动效果,需要我们在结束拖动的时候,动画设置偏移量 这里有一个注意点,由于我们是在拖动结束的时候,手动改变tableview的偏移量, 改变了tableView 自身原有的的滚动效果,所以我们…

竟然还有这么省钱方便的寄快递方式?你竟然不知道!

选择闪侠惠递平台寄快递,这个价格来说真的很亲民了,而且可以多家快递进行比较,全国上门取件,这个真的很不错了。闪侠惠递是个靠谱的平台,售后以及取件率都必须好的。 闪侠惠递平台折扣力度非常棒的!因为渠…

Llama3 端侧部署:算丰 SG2300x 与爱芯元智 AX650N

美国当地时间4月18日,Meta 开源了 Llama3 大模型,包括一个 8B 模型和一个 70B 模型在测试基准中,Llama 3 模型的表现相当出色,在实用性和安全性评估中,与那些市面上流行的闭源模型不相上下。 Llama3 性能指标&#xf…

linux jmeter ant下载并安装【2024-亲测】

环境 centos7 一、下载jmeter 在这里插入代码片wget https://dlcdn.apache.org//jmeter/binaries/apache-jmeter-5.6.3.tgz --no-check-certificate解压 tar -zxvf apache-jmeter-5.6.3.tgz复制到安装目录、设置环境变量 vim /etc/profile添加环境变量,路径改成…

python学习笔记----安装pycharm(1)

一、安装pycharm 1. 下载并安装pycharm https://www.jetbrains.com/pycharm/download2.汉化pycharm 安装插件并重启IDE完成汉化 二、 第一个python程序

谷歌验证码识别/谷歌识别/Google/本地库识别/图像识别

谷歌识别 做这个有两种方式,一种是图像分类的方式,标注量大,识别率有局限性。 另外一种是通过上面的图和下面的小图做一个相似度匹配,做孪生网络。 谷歌验证方式比较丰富,有时候上面的小图没有,我们可以做…

微服务启动慢,看我如何消灭这些憨憨怪!

Hello,我是大都督周瑜,最近在公司做微服务启动速度的优化,我们有些微服务启动要花5-6分钟(就问你夸不夸张),直接导致打工人们有了更多的划水时间,领导表示不开心,要求我将微服务的启…

牛客NC320 装箱问题【中等 动态规划,背包问题 C++/Java/Go/PHP】

题目 题目链接: https://www.nowcoder.com/practice/d195a735f05b46cf8f210c4ad250681c 几乎完全相同的题目: https://www.lintcode.com/problem/92/description 思路 动态规划都是递归递推而来。php答案是动态规划版本,递归版本有 测试用…

UE5 体积云

写好的体积材质放这里面 效果如上 Begin Object Class/Script/UnrealEd.MaterialGraphNode Name"MaterialGraphNode_4"Begin Object Class/Script/Engine.MaterialExpressionVectorParameter Name"MaterialExpressionVectorParameter_0"End ObjectBegin O…

新一代大数据平台,为什么选择中国移动梧桐数据库?

个人介绍:艺名司镜233,是中国移动梧桐数据库研发团队成员,从事相关的技术开发近5年了。最让我觉得自豪的不是在研发这款数据库,而是我们用代码,切实地帮助企业解决数据的困扰,切实地解决社会的问题。 本篇文…

二维码门楼牌管理应用平台:构建智慧社区的新引擎

文章目录 前言一、二维码门楼牌管理应用平台的建设意义二、二维码门楼牌管理应用平台的功能特点三、二维码门楼牌管理应用平台在社区治理中的重要作用 前言 随着信息技术的飞速发展,二维码门楼牌管理应用平台正成为智慧城市建设的重要组成部分。通过该平台&#xf…