在React项目中使用Qrcode.react并实现下载以及刷新功能

原创已于 2023-05-16 10:09:03 修改 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-05-15 17:18:39 首次发布

本文展示了如何在React应用中安装和使用qrcode.react插件来生成二维码，包括设置二维码的大小、颜色和中间的logo图片。此外，还介绍了如何通过更新状态来动态刷新二维码，以及如何将二维码保存到手机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装qrcode.react插件

yarn add qrcode.react
// or 
npm install qrcode.react --save

2. 使用qrcode.react插件生成二维码

// 引入二维码生成组件
import QRCode from 'qrcode.react';

<QRCode
    id="qrCode"
    value="https://www.jianshu.com/u/992656e8a8a6"
    size={200} // 二维码的大小
    fgColor="#000000" // 二维码的颜色
    style={{ margin: 'auto' }}
    imageSettings={{ // 二维码中间的logo图片
        src: 'logoUrl',
        height: 100,
        width: 100,
        excavate: true, // 中间图片所在的位置是否镂空
     }}
 />

下载二维码

 const actions = [
    {
      text: '保存到手机',
      key: 'copy',
      onClick: () => {
        const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
        // 给保存到手机的a标签添加id
        document
          .getElementsByClassName('adm-plain-anchor')[0]
          .setAttribute('id', 'down_link');
        const downLink = document.getElementById('down_link');
        // 二维码格式
        downLink.href = canvasImg.toDataURL('image/png');
        downLink.download = '二维码'; // 图片name
        setVisible(false);
      },
    },
    {
      text: '重置二维码',
      key: 'edit',
      onClick: () => {
        // 在这里更新二维码的值，例如从服务器获取新的URL  在要显示的内容后面加上?key=${qrCodeKey}触发
        const newQRCodeValue = `https://www.example.com/new?key=${qrCodeKey}`;
        setQRCodeValue(newQRCodeValue);
        setQRCodeKey((prevKey) => prevKey + 1);
      },
    },
  ];

// 导航栏图标
  const right = (
    <div style={{ fontSize: 24 }}>
      <MoreOutline onClick={() => setVisible(true)} fontSize={40} />
      <ActionSheet
        extra="请选择你要进行的操作"
        cancelText="取消"
        visible={visible}
        actions={actions}
        onClose={() => setVisible(false)}
      />
    </div>
  );

  // 存放动作面板状态值
  const [visible, setVisible] = useState(false);
  // 存放二维码要展示的文本或者链接地址url地址
  const [qrCodeValue, setQRCodeValue] = useState(
    'https://juejin.cn/post/6951282142903173134'
  );
  // 每次点击都可以刷新二维码用key值变化来触发
  const [qrCodeKey, setQRCodeKey] = useState(0);
// 导航点击返回
const back = () =>
  Toast.show({
    content: '点击了返回区域',
    duration: 1000,
  });

官网地址:qrcode.react - npm

在上面的代码中，我们使用了React的useState钩子来创建一个名为qrCodeValue的状态变量，用于存储二维码的值。当点击"刷新二维码"按钮时，handleRefreshQRCode函数会被调用，它会更新qrCodeValue的值为新的URL。这将触发React重新渲染组件并生成一个新的二维码。

请注意，上述示例假设你已经将QRCodeGenerator组件集成到你的应用程序中，并使用适当的方式进行渲染。你需要将按钮的点击事件处理程序（handleRefreshQRCode）与你的应用程序中的实际刷新逻辑进行集成。

如果要实现每次点击都可以刷新二维码则：

在上面的代码中，我们使用了一个名为qrCodeKey的状态变量来存储一个随机值。每当点击"刷新二维码"按钮时，handleRefreshQRCode函数会增加qrCodeKey的值，从而更新状态并触发重新渲染。

二维码的值通过将qrCodeKey添加到URL中来动态生成。这将导致React认为每次更新二维码值时，它都是一个新的值，从而重新渲染并生成新的二维码。

请注意，我们在QRCode组件中使用了key={qrCodeKey}属性，以确保每次qrCodeKey值更新时，React会创建一个新的QRCode组件实例。

这样，每次点击按钮都会刷新二维码，因为它们都有一个不同的qrCodeKey值，从而生成不同的二维码。