目录

一、下载qrcode.react

二、引入qrcode.react

三 、编写下载二维码的函数

---

在react开发中如果需要二维码，笔者选择使用qrcode.react来快速生成。

一、下载qrcode.react

pnpm add qrcode.react

二、引入qrcode.react

import {Box,Stack,Fab} from '@mui/material';
import { QRCodeCanvas } from 'qrcode.react';
import { useState} from "react";
export const Component = () => {const currentUrl = window.location.protocol + '//' + window.location.host;console.log('🚀 ~ file: Receive.tsx:33 ~ Component ~ currentUrl:', currentUrl);const [qrValue, setQrValue] = useState(currentUrl);return (<Box><Stack direction="row" justifyContent="center" alignItems="center" mb={3}><Box><QRCodeCanvasid="qrCode"value={qrValue}size={128}imageSettings={{excavate: true,src: '/logo-128.png',width: 30,height: 30}}/></Box></Stack></Box>);
};Component.displayName = 'ReceivePage';

 qrcode.react具体配置参数请参考官网qrcode.react

三 、编写下载二维码的函数

 //base64转文件const dataURLtoBlob = (dataurl: string) => {const arr = dataurl.split(',') as any;const mime = arr[0].match(/:(.*?);/)[1];const bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });};//创建a标签用于下载const downloadFile = (url: string, name: string) => {const a = document.createElement('a');a.setAttribute('href', url);a.setAttribute('download', name);a.setAttribute('target', '_blank');a.dispatchEvent(new MouseEvent('click'));  //模拟点击/*    const clickEvent = document.createEvent('MouseEvents');clickEvent.initEvent('click', true, true); //模拟点击，initEvent(方法已经弃用)a.dispatchEvent(clickEvent); */};
//下载二维码const handleDownLoadQRCode = () => {//先获取要下载的二维码const Qr = document.getElementById('qrCode') as any;//把canvas的数据改成base64的格式const canvasUrl = Qr!.toDataURL('image/png');const myBlob = dataURLtoBlob(canvasUrl);const myUrl = URL.createObjectURL(myBlob); // 创建blob下载地址downloadFile(myUrl, 'qrCode');};

最后附上完整代码：

import { Box, Stack, Fab } from '@mui/material';
import { QRCodeCanvas } from 'qrcode.react';
import { useState } from 'react';
export const Component = () => {const currentUrl = window.location.protocol + '//' + window.location.host;console.log('🚀 ~ file: Receive.tsx:33 ~ Component ~ currentUrl:', currentUrl);const [qrValue, setQrValue] = useState(currentUrl);//base64转文件const dataURLtoBlob = (dataurl: string) => {const arr = dataurl.split(',') as any;const mime = arr[0].match(/:(.*?);/)[1];const bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });};//创建a标签用于下载const downloadFile = (url: string, name: string) => {const a = document.createElement('a');a.setAttribute('href', url);a.setAttribute('download', name);a.setAttribute('target', '_blank');a.dispatchEvent(new MouseEvent('click')); //模拟点击/*    const clickEvent = document.createEvent('MouseEvents');clickEvent.initEvent('click', true, true); //模拟点击，initEvent(方法已经弃用)a.dispatchEvent(clickEvent); */};//下载二维码const handleDownLoadQRCode = () => {//先获取要下载的二维码const Qr = document.getElementById('qrCode') as any;//把canvas的数据改成base64的格式const canvasUrl = Qr!.toDataURL('image/png');const myBlob = dataURLtoBlob(canvasUrl);const myUrl = URL.createObjectURL(myBlob); // 创建blob下载地址downloadFile(myUrl, 'qrCode');};return (<Box><Stack direction="row" justifyContent="center" alignItems="center" mb={3}><Box><QRCodeCanvasid="qrCode"value={qrValue}size={128}imageSettings={{excavate: true,src: '/logo-128.png',width: 30,height: 30}}/></Box></Stack><Stack direction="row" justifyContent="space-around"><Fab color="primary" variant="extended" size="small" onClick={handleDownLoadQRCode}>点击下载二维码</Fab></Stack></Box>);
};Component.displayName = 'ReceivePage';