本文主要是介绍react18+ts如何生成二维码并且下载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
一、下载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';
这篇关于react18+ts如何生成二维码并且下载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
