vue 项目中自动生成二维码

最新推荐文章于 2025-04-28 11:27:43 发布

置顶

斯昂

最新推荐文章于 2025-04-28 11:27:43 发布

阅读量2.8k

点赞数

分类专栏：工作学习文章标签： vue QRcode 二维码

本文链接：https://blog.youkuaiyun.com/Leon_940002463/article/details/102668153

版权

vue 项目中自动生成二维码

最近在写一个vue项目，要求根据卡号可以自动生成一个二维码，并渲染在指定位置，因为第一次做类似业务，小编在网上找了找，发现了很多，具体起来主要用的就两种：

QRcode
vue-qr

vue-qr比QRcode功能多在可以在中间加logo，而且好像更方便一点，具体的小编也没试，小编需要的二维码不需要那么多骚操作，就选择了第一种，至于要写这篇博客的目的是为说一下，运用中遇到的问题及解决方法。

下面先介绍QRcode

vue里安装qrcodejs的npm包

npm install qrcodejs2  -save     -s  // 上线需要的包,打包的时候也会打包

页面引用

import QRCode from 'qrcodejs2'    //   直接在需要用的页面 写就行不需要注意路径问题

二维码展示的盒子

<div class="qrcode" ref="qrCodeUrl" id="qrcode"></div>

methods: {
  creatQrCode() {
    var qrcode = new QRCode(this.$refs.qrCodeUrl, {  // 这里选择器也可以直接写 'qrcode' 用的是id选择器   指示不需要带 # 而已
      text: 'xxxx',  //  生成二维码的 内容
      width: 100,    //  宽   单位 px
      height: 100,   //  高   单位 px 
      // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
      // background: '#f0f'  
      // foreground: '#ff0'  
      correctLevel: QRCode.CorrectLevel.H   // 二维码容错 级别
     })
  }
},

mounted() {
	   this.creatQrCode(); // 这里会是一个重点，下面会解释
	  }

点击下载二维码：

	// 点击下载app二维码
    downloadAppCodeImg (name) {
   
      var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')
      var a = document.createElement("a");
      var event = new MouseEvent("click"); // 创建一个单击事件
      a.href = canvasData[0].toDataURL("image/png");;
      a.down