js Qrcode.js实现文字内容通过二维码展示

效果：将电子证件信息通过扫二维码展示出来

点击查看证件生成二维码

2. 手机端扫描得到的证件信息

实现过程：

首先vue index.html 页面引入

2.在需要转换的组件中加入

//展示二维码的div<div class="lanren"><div id="demo"><p class="row"></p><p class="row"></p><p class="row"></p><p class="row"></p></div><div id="qrcode"></div></div>

3.通过事件生成二维码

    getCode(row) {var defaultContent = 'https://blog.csdn.net/qq_44242030?type=blog';// 获取电子二维码let qrcodeNode = document.getElementById("qrcode")qrcodeNode.style.marginTop = "0.5rem"//每次点击清除上次生成的二维码qrcodeNode.innerHTML = ''//设置二维码长宽let qrcode = new QRCode(qrcodeNode, {width: 180,height: 180,color: {dark: "#333333",//前景色light: "red"//背景色}})let divNode = document.getElementById("demo");let pNode = document.getElementsByClassName('row')//标签内容pNode[0].innerText = '店铺: ' + this.storeInfo.shopNapNode[1].innerText = 'NO: ' + row.certificatesNopNode[2].innerText = '证件名称: ' + row.certificateNamepNode[3].innerText = '证件金额: ' + row.fixMoney//把展示内容或者默认网址传给二维码（跳转到该网址）var value = divNode.innerText||defaultContent qrcode.makeCode(value);//不展示上面标签中的内容divNode.style.display = "none";}

js Qrcode.js实现文字内容通过二维码展示相关推荐

使用前端QrCode.js实现根据输入内容生成二维码，并提供二维码下载功能（已使用在交付项目中）
前端QrCode 根据输入内容生成二维码,并提供二维码下载功能简介:这是一个使用前端QrCode自动生成二维码并下载二维码图片的项目. 项目背景:在某个项目的交付阶段,客户提出需要一个可手动生成二维 ...
活动二维码怎么制作？如何将活动内容做成二维码图片？
现在二维码的应用场景越来越多,很多的内容都可以用二维码来展示,比如表单.图片.视频.文字.文件都可以通过制作二维码来分享给他人,那么当遇到举办活动情况时,如何将活动的计划或者菜单做成二维码展示呢?下面 ...
uni-app如何自定义内容生成二维码？
学而不思则罔,思而不学则殆 uni-app 生成二维码 1. 创建uni-app项目 2.HbuildX插件市场安装相关插件 3.使用该插件 3.1 在需要使用的页面进行引入 3.2 页面上使用该插件 ...
用Python实现文本内容生成二维码
大数据时代,我们的日常学习和生活离不开手机,作为一个资深低头族,本人的手机一天二十三小时以上不会离开它的主人超过0.5米远.QQ,微信,微博等常见应用基本上是每个关注时事的年轻人的每日必登录APP. ...
Py之qrcode：调用python的qrcode库两种方式生成二维码、带logo的二维码
Py之qrcode:调用python的qrcode库两种方式生成二维码.带logo的二维码目录 python编程实现生成二维码 1.第一种方式-纯文本 2.第二种方式-带logo
java根据内容生成二维码
java根据内容生成二维码一.首先导入jar包:google.zxing.jar jar包可以从maven网站下载:meven仓库这里可以找到你想要的绝大多数jar包,可以是依赖,也可以是jar包 ...
Vue+element-ui上传logo图片到后端生成二维码展示到页面
Vue+element-ui上传logo图片生成二维码展示到页面该文章将介绍如何通过前端上传二维码logo图片在后台生成二维码,并将生成的二维码转换成Base64编码返回给前端在页面展示,用户扫码二 ...
二维码展示界面高亮设置，仿支付宝收款码，付款码界面高亮实现
我们有时后会遇到这样一个场景,当进入某一个界面的时候需要这个界面高亮显示,而其他界面则是正常的亮度.比如说,在使用支付宝收付款时,进入二维码展示界面时,页面会变高亮. 现在来看看具体的解决方案. 一. ...
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包. 在vue中引入(我这边是vue2).import QRCode from 'qrco ...
.NetCore后台使用QrCode.Net根据网络链接生成二维码
装一个QrCode.Net的Nuget包后台代码: /// <summary> /// 根据路径生成二维码 /// </summary> /// <param name ...

js Qrcode.js实现文字内容通过二维码展示

效果：将电子证件信息通过扫二维码展示出来

实现过程：

js Qrcode.js实现文字内容通过二维码展示相关推荐

最新文章

热门文章