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呢,


  • 2019-12-27 08:40:55

    align-self和align-items的区别

    align-items在伸缩容器上使用它,伸缩容器内部所有的元素都一致地受制于align-items的值。 但是有些时候,我们希望伸缩容器内部某个元素在侧轴上的排列方式有所差异。此时就不能使用 align-items,因为align-items作用于整体。我们希望作用于部分。这就是align-self的发挥场地。

  • 2019-12-29 15:01:37

    修改laravel分页的样式

    首先获取到数据,paginate方法 能够自动判定当前页面正确的数量限制和偏移数。默认情况下,当前页数由HTTP 请求所带的 ?page 参数来决定。当然,该值由 Laravel 自动检测,并自动插入由分页器生成的链接。

  • 2019-12-29 15:05:57

    php 数组分页 array_slice()函数用法

    今天用到一个函数,非常好用,分享给大家 array_slice() -从数组中取出一段 也就是说用这个函数可以和sql语句一样实现分页,原理是将查询出的数组,取出从指定下标开始到指定长度的数组

  • 2019-12-30 10:17:21

    router-link传递参数,query

    在vue-router中,有两大对象被挂载到了实例this; $route(只读、具备信息的对象); $router(具备功能的函数) 查询字符串: 去哪里 ? <router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

  • 2019-12-30 16:48:41

    vue provide/inject详解和用法

    父子组件交互方式多种,props、vuex、 、 emit、localStorage还有就是这个provide/inject了。它适合层级比较深的组件,比如子,子孙,子孙后代的组件有好几个用到父组件的某个属性,就可以用到这个provide/inject,它可以避免写大量繁琐的传值代码 我这里为什么要使用它? 我一个知识库详情父组件中包含了大量的子组件,每个子组件都需要父组件的知识库ID,这时候我不想写大量props,就用到provide/inject进行传值了