如何正确使用 Canvas API 下载 React 生成的 QR 码图像

react-qr-code 默认渲染 SVG，不支持 toDataURL()；需改用 qrcode.react 的 组件，才能调用 Canvas 原生方法实现 PNG 下载。

`react-qr-code` 默认渲染 svg，不支持 `todataurl()`；需改用 `qrcode.react` 的 `canvas>` 组件，才能调用 canvas 原生方法实现 png 下载。

在 React 应用中生成并下载 QR 码时，一个常见误区是误将 SVG 元素当作 Canvas 元素操作。例如，使用 react-qr-code 库时，其默认导出的 组件实际渲染的是 SVG 结构（即 ），而非 元素。因此，当你通过 document.getElementById('qrcode') 获取该节点并尝试调用 .toDataURL() 方法时，浏览器会抛出 TypeError: canvas.toDataURL is not a function —— 因为 SVG 元素没有该方法，只有原生 元素才具备。

✅ 正确解法是切换至支持双渲染模式的库：qrcode.react（注意包名不同，非 react-qr-code）。它提供两个专用组件：

• ：输出可缩放矢量图（适合展示，不支持 toDataURL）
• ：输出 元素（支持 toDataURL()、toBlob() 等 Canvas API）

✅ 步骤一：安装并导入正确组件

npm install qrcode.react
# 或
yarn add qrcode.react

import { QRCodeCanvas } from 'qrcode.react';

✅ 步骤二：使用 渲染，并确保 ID 可选中

return (
  <div>
    <QRCodeCanvas 
      id="qrcode" 
      level="H" 
      value={box.id} 
      size={100} 
      bgColor="#ffffff"
      fgColor="#000000"
    />
    <Button onClick={downloadQRCode}>Download QR</Button>
  </div>
);

✅ 步骤三：安全获取 canvas 并触发下载

const downloadQRCode = () => {
  const canvas = document.getElementById('qrcode') as HTMLCanvasElement;
  if (!canvas) {
    throw new Error('QR code canvas element not found. Ensure QRCodeCanvas has the correct id.');
  }

  // 生成 PNG Data URL（无需 replace MIME type）
  const pngUrl = canvas.toDataURL('image/png');

  const link = document.createElement('a');
  link.href = pngUrl;
  link.download = `${box.id}.png`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

⚠️ 注意事项：

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

下载

• 不要对 toDataURL() 返回的 URL 执行 .replace("image/png", "image/octet-stream")：现代浏览器已支持直接下载 Data URL，强行修改 MIME 可能导致兼容性问题或失效；
• 若需更高画质，可增大 size 属性（如 size={400}），QRCodeCanvas 会自动缩放渲染；
• SSR（服务端渲染）环境下， 可能因无 DOM 报错，建议配合 useEffect 或动态导入（dynamic(import(...), { ssr: false })）；
• 如需支持 IE11，请添加 polyfill（toDataURL 在 IE 中仅支持 image/png，且需 canvas 已绘制完成）。

? 进阶提示：若需导出高分辨率或带 Logo 的二维码，推荐结合 html2canvas 或 canvas-toBlob（配合 FileSaver.js）实现更灵活的导出控制。

通过以上调整，即可稳定调用 Canvas API 实现一键 PNG 下载，彻底规避 “toDataURL is not a function” 错误。