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

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

1.二维码展示+下载功能——[email protected]

我是安装的[email protected]，指定了具体的版本号，也可以安装默认的当前稳定版本，即npm安装时不指定版本号。

1.npm/yarn安装qrcodejs2

npm install qrcodejs2
or
yarn add qrcodejs2

2.引入qrcodejs2

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

import QRCode from 'qrcodejs2';

2.1html代码

<template>
 <a-modal
    title="入职登记表"
    :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-button
         id="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.复制链接功能——[email protected]

我是安装的[email protected]，指定了具体的版本号，也可以安装默认的当前稳定版本，即npm安装时不指定版本号。

1.npm/yarn安装clipboard

npm install clipboard
or
yarn add clipboard

2.引入clipboard

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

import Clipboard from 'clipboard';

2.1html代码

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

<a-button
  id="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();
  });
},

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