Vue3+TypeScript实现二维码生成组件

/**
 * @description 生成唯一 uuid
 * @return string
 */
export function generateUUID() {
	if (typeof crypto === "object") {
		if (typeof crypto.randomUUID === "function") {
			return crypto.randomUUID();
		}
		if (typeof crypto.getRandomValues === "function" && typeof Uint8Array === "function") {
			const callback = (c: any) => {
				const num = Number(c);
				return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(16);
			};
			return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, callback);
		}
	}
	let timestamp = new Date().getTime();
	let performanceNow = (typeof performance !== "undefined" && performance.now && performance.now() * 1000) || 0;
	return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
		let random = Math.random() * 16;
		if (timestamp > 0) {
			random = (timestamp + random) % 16 | 0;
			timestamp = Math.floor(timestamp / 16);
		} else {
			random = (performanceNow + random) % 16 | 0;
			performanceNow = Math.floor(performanceNow / 16);
		}
		return (c === "x" ? random : (random & 0x3) | 0x8).toString(16);
	});
}

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import QRCode, { type QRCodeRenderersOptions } from "qrcode";
import { generateUUID } from "@/utils/util";

interface QRCodeProps {
	type?: "canvas" | "img"; // 二维码类型 ==> 默认img, img 支持预览,canvas支持logo
	size?: number; // 二维码大小 ==> 默认200
	iconSize?: number; // 二维码图标大小 ==> 默认40
	content: string; // 二维码内容 ==> 必填
	logo?: string; // 二维码logo ==> 默认无
	options?: QRCodeRenderersOptions; // 二维码配置 ==> 默认无
	errorLevel?: "L" | "M" | "Q" | "H"; // 二维码容错级别 ==> 默认H
}

// 接收父组件参数并设置默认值
const props = withDefaults(defineProps<QRCodeProps>(), {
	type: "img",
	size: 200,
	iconSize: 40,
	errorLevel: "H"
});

const qrCodeUrl = ref<string>("");
const canvasId = ref("canvas" + generateUUID());
const loading = ref(true);

const QRCodeStyle = computed(() => {
	return {
		width: props.size + "px",
		height: props.size + "px"
	};
});

// 生成二维码
const initQRCode = async () => {
	if (props.type === "canvas") {
		const canvasRef: any = await QRCode.toCanvas(document.getElementById(canvasId.value), props.content, {
			width: props.size,
			margin: 2,
			errorCorrectionLevel: props.errorLevel,
			...props.options
		});
		if (props.logo) {
			const ctx = canvasRef.getContext("2d");
			const iconBgW = props.iconSize + 5;
			const iconBgH = props.iconSize + 5;
			const iconBgX = (canvasRef.width - iconBgW) / 2;
			const iconBgY = (canvasRef.width - iconBgH) / 2;
			ctx.fillStyle = "#fff";
			ctx.fillRect(iconBgX, iconBgY, iconBgW, iconBgH);
			// logo
			const iconX = (canvasRef.width - props.iconSize) / 2;
			const iconY = (canvasRef.width - props.iconSize) / 2;
			const image = new Image();
			image.crossOrigin = "Anonymous"; // 设置图片的跨域属性
			image.onload = () => {
				ctx.drawImage(image, iconX, iconY, props.iconSize, props.iconSize);
				qrCodeUrl.value = canvasRef.toDataURL();
			};
			image.src = props.logo;
		} else {
			qrCodeUrl.value = canvasRef.toDataURL();
		}
		loading.value = false;
	} else {
		const url = await QRCode.toDataURL(props.content, {
			width: props.size,
			margin: 2,
			errorCorrectionLevel: props.errorLevel,
			...props.options
		});
		qrCodeUrl.value = url;
		loading.value = false;
	}
};

// 下载二维码
const downLoadQRCode = (fileName: string = generateUUID(), fileType: string = ".png") => {
	const exportFile = document.createElement("a");
	exportFile.style.display = "none";
	exportFile.download = `${fileName}${fileType}`;
	exportFile.href = qrCodeUrl.value;
	document.body.appendChild(exportFile);
	exportFile.click();
	// 去除下载对 url 的影响
	document.body.removeChild(exportFile);
};

onMounted(() => {
	initQRCode();
});

defineExpose({
	downLoadQRCode
});
</script>

<template>
	<div :style="QRCodeStyle" overflow-hidden rounded-lg border border-slate-300 border-solid v-loading="loading">
		<ImagePreview :width="QRCodeStyle.width" :height="QRCodeStyle.height" v-if="type === 'img'" :image-url="qrCodeUrl" />
		<canvas v-else :style="QRCodeStyle" :id="canvasId"></canvas>
	</div>
</template>

<style lang="scss" scoped></style>