React中实现点击下载放大版二维码（64px转500×500px）

你当前的实现思路是截取页面上的64px二维码再放大到500px，这种方式会导致下载的图片模糊——本质是拉伸低分辨率的DOM元素，而非生成原生高清二维码。下面提供两种可行的优化方案：

方案一：利用隐藏的高清二维码组件截图下载 #

原理是在页面中渲染一个隐藏的、尺寸为500px的二维码，点击时针对这个高清组件进行截图，避免拉伸模糊。

组件代码修改 #

<td className="text-center">
  <div className="d-flex flex-column w-100 me-2">
    <div className="symbol symbol-45px me-5">
      <a style={{ cursor: "pointer" }} onClick={downloadQRCode}>
        <QRCode
          id="QR-Code-Small"
          value={project.id ? `${qrUrl}${project.id}` : "www.google.com"}
          size={64}
        />
      </a>
    </div>
    {/* 隐藏的高清二维码：绝对定位+透明化，不影响页面布局 */}
    <div style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}>
      <QRCode
        id="QR-Code-HD"
        value={project.id ? `${qrUrl}${project.id}` : "www.google.com"}
        size={500}
      />
    </div>
  </div>
</td>

下载函数修改 #

const downloadQRCode = () => {
  // 选择隐藏的高清二维码容器
  const qrCodeContainer = document.getElementById("QR-Code-HD")?.parentElement;

  // 基于html2canvas的toPng方法截图（确保已安装对应依赖）
  toPng(qrCodeContainer, {
    backgroundColor: "white",
  })
    .then((dataUrl) => {
      const link = document.createElement("a");
      link.download = "qrcode.png";
      link.href = dataUrl;
      link.click();
    })
    .catch(function (error) {
      console.error("下载失败:", error);
    });
};

方案二：直接生成高清二维码Base64下载（无需DOM元素） #

使用qrcode库直接生成指定尺寸的二维码Base64，跳过DOM渲染步骤，更高效且无样式兼容问题，是更推荐的方案。

第一步：安装依赖 #

npm install qrcode
# 或使用yarn
yarn add qrcode

第二步：修改下载函数 #

import QRCodeGenerator from 'qrcode';

const downloadQRCode = () => {
  const qrValue = project.id ? `${qrUrl}${project.id}` : "www.google.com";
  
  // 生成500×500的高清二维码Base64
  QRCodeGenerator.toDataURL(qrValue, {
    width: 500,
    margin: 1,
    color: {
      dark: '#000000',
      light: '#ffffff'
    }
  })
  .then((dataUrl) => {
    const link = document.createElement("a");
    link.download = "qrcode.png";
    link.href = dataUrl;
    link.click();
  })
  .catch((error) => {
    console.error("生成二维码失败:", error);
  });
};

此时页面上的小二维码组件可以保持原样，无需额外添加隐藏元素。

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