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-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)

}

源代码如下：