Vue实现生成二维码并且能下载到本地

2019-12-30 23:24:49

参考地址 Vue2.x实现生成二维码并且能下载到本地


个人推荐vue-qr,好用,还能下载二维码

一、前端生成二维码功能很常见,不用想肯定得用到插件,上github上一搜索vue qrcode出来好几个插件,star并不是很多大部分都是100多个star,下面主要介绍vue-qr的使用方法和如何下载二维码到本地的方法。


二、


    1.vue-qr,先说一下特点:带可以设置logo图片、背景图片、背景颜色、尺寸、边距等。


        使用方法:


        1.npm install vue-qr --save

        2.在你要生成二维码的组件里面 import VueQr from 'vue-qr'

        3.在export default里面注册组件components:{VueQr},

        4.在template里 <vue-qr  :logoSrc="config.logo" :text="config.value" :size="200" :margin="0"></vue-qr>

        5.在export default data(){retrun{ config: {

          value: 'www.baidu.com',//显示的值、跳转的地址

          logo:'static/img/logo.png'//中间logo的地址

        }}}

显示的值、跳转的地址

          logo:'static/img/logo.png'//中间logo的地址

        }}}

        6.简单的生成了二维码,这个生成的是img的二维码,要想生成canvas的二维码,得安装awesome-qr.js,

生成的是img的二维码,要想生成canvas的二维码,得安装awesome-qr.js,

        但是这个稍微复杂一些需要兼容你的node版本,很可能会报错。这个几乎就满足你的需求了,所以就不用搞那么多麻烦事了。

        7.如果你想下载这个二维码,可以用html的 a标签的 download属性 具体实现方法如下:

如果你想下载这个二维码,可以用html的 a标签的 download属性 具体实现方法如下:

            7.1-1 先获取到img标签的src, let url = document.querySelector('#qrcode img').src

            7.1-2 动态创建一个a标签  let a = document.createElement('a') 

            7.1-3 定义一个点击事件  let  event = new MouseEvent('click')

            7.1-4 设置下载图片的名称  a.download = “张三的二维码”//默认下载下面的文件格式为;张三的二维码.png

张三的二维码.png

            7.1-5 让a标签的href = 图片的src   a.href = url 

7.1-5 让a标签的href = 图片的src   a.href = url 

            7.1-6 利用合成函数,执行event点击下载事件  a.dispatchEvent(event)

            7.1-7 源代码如下:

              downloadImg(){

                var oQrcode = document.querySelector('#qrcode img')

                var url = oQrcode.src

                var a = document.createElement('a')  

                var event = new MouseEvent('click')  

                // 下载图名字

                a.download = '张三的二维码'

                //url 

                a.href = url 

                //合成函数,执行下载 

                a.dispatchEvent(event)

               }

源代码如下:

              downloadImg(){

                var oQrcode = document.querySelector('#qrcode img')

                var url = oQrcode.src

                var a = document.createElement('a')  

                var event = new MouseEvent('click')  

                // 下载图名字

                a.download = '张三的二维码'

                //url 

                a.href = url 

                //合成函数,执行下载 

                a.dispatchEvent(event)

               }

        7.API地址;https://github.com/Binaryify/vue-qr

    2.vue-qriously,与vue-qr组件十分类似,唯一缺点就是不能设置中间的logo图标,所以说很尴尬。还不如直接用上面的vue-qr呢,


  • 2020-11-22 22:58:52

    Android LiveData Transformations

    有时候有这样的需求,需要在LiveData将变化的数据通知给观察者前,改变数据的类型;或者是返回一个不一样的LiveData。

  • 2020-11-22 23:00:16

    androidx中的lifecycle组件

    Lifecycle-aware components生命周期感知组件执行操作,以响应另一个组件生命周期状态的更改,例如Activity和Fragment。这些组件可以帮助您生成更有组织、更容易维护的轻量级代码。

  • 2020-11-22 23:02:50

    Android数据存储之DataBase的Room

    Room是Google在AndroidX中提供的一个ORM(Object Relational Mapping,对象关系映射)库。它是在SQLite上提供的一个抽象层,可以使用SQLite的全部功能,同时可以更好更便捷流畅地访问数据库。(关于AndroidX可以参考

  • 2020-11-22 23:04:39

    Android组件 LiveData与MutableLiveData教程

    LiveData与ViewMode是经常搭配在一起使用的,但是为了不太混乱,我还是拆分开来说明,此篇博客只讲解 LiveData 与 MutableLiveData的概念与使用方式(但是会涉及到ViewMode的部分代码).

  • 2020-11-22 23:14:52

    Dagger 2 在 Android 上的用法

    在前面的文章我们介绍了Dagger2 中的大部分注解的使用,接下来我们从源码角度分析下第一篇文章中例子的原理。

  • 2020-11-22 23:18:59

    Android开发从Dagger2迁移至Kodein的感受

    最近个人在尝试构建 Kotlin版本 的Android MVVM开发框架,在依赖注入框架的选型上,我最终选择了 Kodein 。这是一个非常轻量级的DI框架,相比于配置繁琐的Dagger(繁琐的配置也是导致Dagger学习成本一直居高不下的原因!),它的配置过程更清晰且简单,并且,这个库的源码也是 Kotlin 的。

  • 2020-11-22 23:25:56

    Dagger2源码解析inject过程

    添加inject后,通过编译生成的DaggerMainComponent类来导入,说明编译以后生成了一些类,那到底生成了什么类呢。 Module和Component又是什么,该怎么里理解 在这篇文章后里将一一讨论。

  • 2020-11-22 23:27:28

    dagger学习教程

    dagger android 学习(一):dagger基础使用 dagger android 学习(二):AndroidInjector的使用 dagger android 学习(三):ContributesAndroidInjector的进一步优化 dagger android 学习(四):基于dagger2的mvp架构