React项目中实现生成的二维码可下载功能求助

嘿，我刚好也用qrcode.react做过二维码下载的功能，给你分享两个靠谱的实现方案，都是亲测能用的～

方案一：类组件实现方式 #

你可以通过给QRCode组件添加ref，获取到它渲染的canvas（或svg）元素，然后转成可下载的链接：

import QRCode from 'qrcode.react';

class QrCodeGenerator extends React.Component {
  constructor(props) {
    super(props);
    this.qrRef = React.createRef();
  }

  // 定义下载函数
  downloadQrCode = () => {
    const qrCodeElement = this.qrRef.current;
    
    // 处理默认的canvas模式
    if (qrCodeElement instanceof HTMLCanvasElement) {
      // 将canvas转为PNG格式的Data URL
      const dataUrl = qrCodeElement.toDataURL('image/png');
      // 创建a标签触发下载
      const downloadLink = document.createElement('a');
      downloadLink.href = dataUrl;
      // 自定义下载的文件名，这里结合deviceId命名更清晰
      downloadLink.download = `device-${this.state.values.deviceId}-qrcode.png`;
      downloadLink.click();
    } 
    // 如果你的二维码是SVG模式（设置了renderAs="svg"），用下面的逻辑
    else if (qrCodeElement instanceof SVGElement) {
      const svgString = new XMLSerializer().serializeToString(qrCodeElement);
      const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
      const svgUrl = URL.createObjectURL(svgBlob);
      
      const downloadLink = document.createElement('a');
      downloadLink.href = svgUrl;
      downloadLink.download = `device-${this.state.values.deviceId}-qrcode.svg`;
      downloadLink.click();
      
      // 释放Blob URL，避免内存泄漏
      URL.revokeObjectURL(svgUrl);
    }
  };

  render() {
    return (
      <div>
        <QRCode 
          value={this.state.values.deviceId} 
          ref={this.qrRef} 
        />
        {/* 添加下载按钮，点击触发下载函数 */}
        <button onClick={this.downloadQrCode}>下载设备二维码</button>
      </div>
    );
  }
}

方案二：函数组件实现方式 #

如果你的项目用的是函数组件，用useRef就能实现同样的效果：

import { useRef, useState } from 'react';
import QRCode from 'qrcode.react';

function QrCodeGenerator() {
  const qrRef = useRef(null);
  // 假设你用 useState 管理deviceId
  const [values, setValues] = useState({ deviceId: 'your-device-id-here' });

  const downloadQrCode = () => {
    const qrCodeElement = qrRef.current;
    if (!qrCodeElement) return;

    if (qrCodeElement instanceof HTMLCanvasElement) {
      const dataUrl = qrCodeElement.toDataURL('image/png');
      const downloadLink = document.createElement('a');
      downloadLink.href = dataUrl;
      downloadLink.download = `device-${values.deviceId}-qrcode.png`;
      downloadLink.click();
    }
  };

  return (
    <div>
      <QRCode value={values.deviceId} ref={qrRef} />
      <button onClick={downloadQrCode}>下载设备二维码</button>
    </div>
  );
}

一些注意事项 #

• 确保this.state.values.deviceId（或函数组件里的values.deviceId）有有效值，不然生成的二维码会是空白的，下载下来也是空图。
• 如果需要生成更高分辨率的二维码，可以给QRCode组件添加size属性，比如size={300}，这样下载的图片会更清晰。
• SVG模式的下载逻辑和canvas略有不同，上面的代码已经覆盖了两种情况，根据你的实际渲染模式选择对应逻辑即可。

内容的提问来源于stack exchange，提问作者Savandy