vue使用qrcodejs2进行二维码显示以及下载

标签：vue refs QRCodejs downloadLink 二维码 qrcodejs2 下载

1、安装qrcodejs2

npm install qrcodejs2 / yarn add qrcodejs2

2、引入qrcodejs2

import QRCodejs from 'qrcodejs2';

3、使用

html：

<div ref="locatorQRCodeRef"></div>
<!-- 作为下载二维码使用 -->
<a ref="locatorQRCodeDownloadLinkRef" style="display: none"></a>

js：

new QRCodejs(this.$refs.locatorQRCodeRef, {
    text: ‘www.baidu.com’, // 需要变成二维码的文本
    width: 260,
    height: 260,
    colorDark: '#333', // 二维码颜色
    colorLight: '#fff', // 二维码背景颜色
    correctLevel: QRCodejs.CorrectLevel.L //容错率,L/M/H
});

let qrcodeCanvas = ((this.$refs.locatorQRCodeRef || {})?.getElementsByTagName?.('canvas') || [])?.[0]; this.qrcodeImgUrl = qrcodeCanvas?.toDataURL?.('image/png'); // 作为下载图片资源

4、效果

 

5、下载二维码功能（打印功能在另外一篇：https://www.cnblogs.com/zaijin-yang/p/16896229.html）

handleDownloadLocatorQRCode() {
      let downloadLink = this.$refs.locatorQRCodeDownloadLinkRef;
      downloadLink.setAttribute('href', this.qrcodeImgUrl);
      downloadLink.setAttribute(
        'download',
        `二维码_${new Date().getTime()}.png`
      );
      downloadLink.click();
      URL.revokeObjectURL(downloadLink.href);
},

 

标签：vue,refs,QRCodejs,downloadLink,二维码,qrcodejs2,下载
From： https://www.cnblogs.com/zaijin-yang/p/16896566.html