Vue实现生成二维码并且能下载到本地_vue-qr的使用

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

1、vue-qr的安装：

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、在js中

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

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1086