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

一、前端生成二维码功能很常见,不用想肯定得用到插件,上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的地址
        }}}
        6.简单的生成了二维码,这个生成的是img的二维码,要想生成canvas的二维码,得安装awesome-qr.js,
        但是这个稍微复杂一些需要兼容你的node版本,很可能会报错。这个几乎就满足你的需求了,所以就不用搞那么多麻烦事了。
        7.如果你想下载这个二维码,可以用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
            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)
               }
        7.API地址;https://github.com/Binaryify/vue-qr
    2 .vue-qriously,与vue-qr组件十分类似,唯一缺点就是不能设置中间的logo图标,所以说很尴尬。还不如直接用上面的vue-qr呢,

猜你喜欢

转载自blog.csdn.net/qq_32113629/article/details/80480985