Vue中页面生成二维码以及二维码图片下载

有的场景中需要通过接口数据将内容生成二维码实现步骤如下。

一、安装 qrcodejs2 包

二、import QRCode from 'qrcodejs2'  

页面中引入 QRCode,

三、二维码创建

  二维码占位：   <div id="docCode" ref="docCode"  ></div>

代码生成

 var qrcode = new QRCode('docCode', { // 第一个入参是组件id

          text: docNum, // 生成二维码的文本

          width: 50,

          height: 50,

          colorDark: '#000000', // 二维码色

          colorLight: '#ffffff', // 背景色

          correctLevel: QRCode.CorrectLevel.L // 容错等级，H是heigh，最高，所以二维码看起来很密

        })；

二维码图下载

   var canvasData = this.$refs.docCode.getElementsByTagName('canvas')

      var a = document.createElement('a')

      var event = new MouseEvent('click') // 创建一个单击事件

      a.href = canvasData[0].toDataURL('image/png')

   

      a.download ='二维码'

      a.dispatchEvent(event) // 触发a的单击事件