vue2+qrcodejs2+clipboard——实现二维码展示+下载+复制到剪切板——基础积累

最近在写后台管理系统时，遇到一个需求就是要实现二维码的展示+下载+复制到剪切板。
效果图如下：

1.二维码展示+下载功能——qrcodejs2@0.0.2

我是安装的qrcodejs2@0.0.2，指定了具体的版本号，也可以安装默认的当前稳定版本，即npm安装时不指定版本号。

1.npm/yarn安装qrcodejs2

npm install qrcodejs2
or
yarn add qrcodejs2

2.引入qrcodejs2

由于我只是在单个页面上用到此功能，因此只需要当前页面局部引入，没有全局注册。

import QRCode from 'qrcodejs2';

2.1html代码

<template><a-modaltitle="入职登记表":visible="visible":confirmLoading="confirmLoading"@ok="handleOk"@cancel="handleCancel"width="500px"><a-spin :spinning="confirmLoading" tip="正在处理中请稍后"><div class="qrcode" ref="qrCodeUrl" id="qrcodeId"></div><!-- 作为下载二维码使用 --><a ref="locatorQRCodeDownloadLinkRef" style="display: none"></a><div class="btnCls"><a-button type="primary" @click="handleDownloadLocatorQRCode">下载二维码</a-button></div><div class="btnCls"><a-buttonid="copyBtn"type="primary":data-clipboard-text="copyConfig"ghost@click="handleClipboard">复制链接</a-button></div></a-spin></a-modal>
</template>

2.2js代码

import Clipboard from 'clipboard';
import QRCode from 'qrcodejs2';
export default{data(){return{visible: false,copyConfig: '',qrcode: null,qrcodeImgUrl: '',}},methods:{//弹窗打开调用的接口showModal(){this.visible = true;this.$nextTick(()=>{//创建二维码this.creatQrCode();})},creatQrCode(){let str = window.location.hash;let urlArr = str.split('/');urlArr.splice(urlArr.length - 1, 1);urlArr.push('RecommenH5');let url = window.location.origin + '/' + urlArr.join('/');this.copyConfig = url;console.log(url);document.getElementById('qrcodeId').innerHTML = ''; //在调用qrCode前使用js原生方法清空元素内容this.qrcode = new QRCode(this.$refs.qrCodeUrl, {text: url, // 需要转换为二维码的内容width: 140,height: 140,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H,});let qrcodeCanvas = ((this.$refs.qrCodeUrl || {})?.getElementsByTagName?.('canvas') || [])?.[0];this.qrcodeImgUrl = qrcodeCanvas?.toDataURL?.('image/png'); // 作为下载图片资源},//下载二维码功能handleDownloadLocatorQRCode() {let downloadLink = this.$refs.locatorQRCodeDownloadLinkRef;downloadLink.setAttribute('href', this.qrcodeImgUrl);console.log('this.qrcodeImgUrl', this.qrcodeImgUrl);downloadLink.setAttribute('download',`二维码_${new Date().getTime()}.png`);downloadLink.click();URL.revokeObjectURL(downloadLink.href);},}
}

2.复制链接功能——clipboard@2.0.8

我是安装的clipboard@2.0.8，指定了具体的版本号，也可以安装默认的当前稳定版本，即npm安装时不指定版本号。

1.npm/yarn安装clipboard

npm install clipboard
or
yarn add clipboard

2.引入clipboard

由于我只是在单个页面上用到此功能，因此只需要当前页面局部引入，没有全局注册。

import Clipboard from 'clipboard';

2.1html代码

同上;
主要代码就是一个按钮：

<a-buttonid="copyBtn"type="primary":data-clipboard-text="copyConfig"ghost@click="handleClipboard">复制链接</a-button
>

2.2复制功能

handleClipboard() {let clipboard = new Clipboard('#copyBtn');clipboard.on('success', () => {this.$message.success(`复制成功`);clipboard.destroy();});
},

完成！！！多多积累，多多收获！