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>
          <QRCodeCanvas
            id="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>
          <QRCodeCanvas
            id="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';