vue - 将页面url生成二维码（可以定义成对象再调用）1.2

最新推荐文章于 2024-06-22 08:17:10 发布
最新推荐文章于 2024-06-22 08:17:10 发布
阅读量1.2k 收藏 5
点赞数
文章标签： 页面数据扫描 vue qrcode使用 qrcode 扫一扫 手机扫一扫获取html页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sicily_winner/article/details/107511592
版权
本文介绍了在Vue项目中如何生成页面URL的二维码，包括单页面调用和全局调用的实现步骤，使得用户可以通过手机微信等扫描二维码查看网页数据。内容涉及qrcode.js的引入和使用，以及调用示例。
摘要由CSDN通过智能技术生成

目录

vue单页面调用

1、下载或者导入qrcode.js

2、页面scan icon image

3、scan实现方法

vue全局调用

1、引入依赖brower.js和qrcode.js

2、使用页面调用

效果gif

参考文章

在上一篇文章中我们可以实现了，将html页面变成图片，调用浏览器下载插件自动下载；

      

本篇中将要实现：

手机微信等扫一扫，然后在手机上面可以查看网页数据。

  • vue单页面调用

1、下载或者导入qrcode.js

npm install --save qrcode

或者

 <script th:src="@{'~'+${subDomainUrl}+'js/utils/qrcode.js'}"></script>

2、页面scan icon image

<img th:src="@{'~'+${subDomainUrl}+'img/ui/scan.png'}" @click="scan()" width="15
最低0.47元/天 解锁文章
winner_corl
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue转换成二维码
m0_73661157的博客
07-14 962
1、qrcode【纯二维码】 2、vue-qr【带icon的二维码】
url转二维码----vue-qriously
ghost_violets的博客
09-24 352
现在前端常常会见到这样的功能，就是将 url 链接转成二维码展示，接下来就介绍一下将 url 转成二维码的插件 vue-qriously 的用法（vue中） 1：下载vue-qriously npm i vue-qriously -S 2：全局引入 //在main.js中进行全局引入 import VueQriously from 'vue-qriously' Vue.use(VueQriously) 3：在页面使用 <template> <div> <qri.
vue实现URL转二维码
最新发布
weixin_73251435的博客
06-22 354
2.进行全局挂载还是当前页面引入看个人习惯，全局挂载引入使用：main中引入import VueQrcode from 'vue-qrcode'，使用app.component('vue-qrcode', VueQrcode)注：app是const app =createApp()实例，页面使用：<vue-qrcode :value="ruleForm.earnestSetUrl" :size="'50'"></vue-qrcode>
Vue项目中生成二维码
weixin_43430789的博客
11-07 300
本来是由后台生成二维码的，但是测试后不是很稳定，由于网络问题有时候会加载不过来。。。 之后就发现vue的两个插件：vue-qart和vue-qr。对比之后发现，vue-qr的配置更全一些，所以选择了vue-qr vue-qart： 1、npminstallvue-qart--save 2、importVueQArtfrom'vue-qart' 　　newVue({...
vue项目生成二维码
m0_66879773的博客
01-31 1355
在这个示例中，你可以在输入框中输入文本，然后点击按钮生成相应的二维码。qrcode 库的 toDataURL 方法用于将文本转换为数据 URL，然后通过 Vue 绑定将生成的数据 URL 显示为图片。在Vue 中使用 qrcode 库生成二维码，你首先需要安装该库。然后，你可以在你的 Vue 3组件中使用这个库。更多属性用法可以去官网查看试试。
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 6598
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
wx三方支付+生成二维码
XXQingZhong的博客
04-25 724
代码实例 前言 主要介绍了微信小程序内部支付的流程，然而实际上微信小程序有一定的局限性，也就是用户范围仅限于小程序内部生态圈，在生活中真正具有广泛性、高效性、使用方便性的支付方式还得是扫码支付，扫码的优点在于推广成本低，上至钓鱼台国宾馆，下至发廊地摊都能用，打印出来就完事了，而相比其他支付方式，现金的找零及假钞问题，信用卡的办理门槛、pos机的沉没成本，就算微信可集成的h5支付和小程序支付，奈何很多老年人根本不会用小程序和手机浏览器，更别说再进行支付操作了，所以基于二维码的扫码支付的确是非常符合国情的。
Vue实战篇三十：实现一个简易版的头条新闻
我的博客
07-04 2646
Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六： 使用Vet
微信支付开发，基于SpringBoot+Vue架构的Java在线支付项目
slw213106的博客
12-29 1318
目录 本项目主要通过以下链接进行学习 【尚硅谷】微信支付开发，基于SpringBoot+Vue架构的Java在线支付视频教程 这篇文章结合了自已的思考以及笔记 该项目主要是基于 后端技术有：springboot+springmvc+restful+vue+mybatis-plus+mysql 前端技术有：html+css+vue 本文的框架主要介绍 微信支付的一些引言，关于支付的证书、密钥以及签名 项目的构建到实现 基础支付API接口 本文的框架涉及的知识点 可看我之前的文章 基础知识
Element UI +Vue页面生成二维码的方法
紫水木鱼的博客
03-12 2772
margin). Default is 0.2. 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale。//在终端输入npm命令，安装二维码插件。logoSrc中间logo。
Element UI +Vue页面生成二维码的方法_element vue 前端如何生成二维码(1)
m0_61042126的博客
04-21 1180
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
vue url生成二维码
qq_41786458的博客
03-19 1078
npm install qrcodejs2;//安装包 <div id="qrcode"></div>//html import QRCode from 'qrcodejs2'//引入方法 mounted() {//需要在mounted中调用QRCode方法 var qrcode = new QRCode(document.getElementById("qrco...
vue把后端返回的url转化成二维码
guhjkn的博客
02-27 587
text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容。vue把后端返回的url转化成二维码。
vue把链接转二维码
weixin_30724853的博客
07-25 497
使用qrcodejs2插件 1. 安装qrcodejs2：npm install qrcodejs2 --save 2. 在组件里面引入： import QRCode from 'qrcodejs2' 3. 在HTML加入:<div id="qrcode" ref="qrcode"></div> 4. 方法： qrcode () { let qr...
vue 把链接转成二维码
m0_59735348的博客
09-23 3401
vue 把链接转成二维码
vue根据URL链接生成二维码
qq_39870203的博客
04-06 1348
errorCorrectionLevel: "L", //容错级别。//引入生成二维码插件。type: "image/png", //生成的二维码类型。dark: "#666666", //前景色。light: "#fff", //背景色。quality: 0.3, //二维码质量。margin: 4, //二维码留白边距。text: "", //二维码内容。height: 256, //高。width: 256, //宽。
vue 一个动态链接url转成二维码
温柔雨哥的博客
07-26 796
安装相关的依赖包 npm install qrcode2 --save template中需要展示的容器 <div id="qrcode" ref="qrcode"></div> 在js代码中写入转换为二维码方法 //生成二维码 qrcodeScan() { //这里是为了 每次进入方法就删除上一张二维码 document.getElementById("qrcode").innerHTML = ""; //获取url l
vue-qr数字可以生成二维码吗？
06-13
是的，vue-qr组件可以用于生成数字的二维码。您只需要将数字作为文本传递给组件的value属性即可生成对应的二维码。例如： ``` <template> <div> <qrcode-vue :value="1234567890"></qrcode-vue> </div> </template> <script> import QrcodeVue from 'qrcode.vue'; export default { components: { QrcodeVue } } </script> ``` 这样就可以生成一个包含数字1234567890的二维码。当然，您也可以根据需要将数字转换为字符串再传递给组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值