如何在React-PDF生成的PDF中嵌入二维码？报错求助

问题原因 #

你误用了qrcode.react库——它是一个用于在浏览器DOM中渲染二维码的React组件，没有提供toDataURL这个静态方法。你需要的是纯JavaScript的二维码生成库qrcode，它支持生成Data URL用于PDF嵌入。

解决步骤 #

1. 替换依赖库 #

先卸载错误的库，安装正确的qrcode库：

npm uninstall qrcode.react
npm install qrcode

2. 修改代码实现 #

替换导入和二维码生成逻辑，以下是完整修正后的代码：

import { Page, Text, Document, StyleSheet, Image } from "@react-pdf/renderer";
import QRCode from "qrcode"; // 替换为纯JS二维码生成库
import { useState, useEffect } from "react";

const styles = StyleSheet.create({
  header: {
    fontSize: 12,
    marginBottom: 20,
    textAlign: "center",
    color: "grey",
  },
  text: {
    margin: 12,
    fontSize: 14,
    textAlign: "justify",
    fontFamily: "Times-Roman",
  },
  qrcode: {
    width: 100,
    height: 100,
  },
});

const PdfFile = () => {
  const url = "https://www.example.com";
  const [qrcodeDataUrl, setQRCodeDataUrl] = useState(null);

  useEffect(() => {
    const generateQRCode = async () => {
      try {
        // qrcode库的toDataURL是异步方法，直接传入目标内容即可
        const dataUrl = await QRCode.toDataURL(url);
        setQRCodeDataUrl(dataUrl);
      } catch (err) {
        console.error(err);
      }
    };
    generateQRCode();
  }, [url]);

  return (
    <Document>
      <Page>
        <Text style={styles.header} fixed>
          EUROPEAN ONLINE BORDER
        </Text>
        <Text style={styles.text}>Have a good trip!</Text>
        <Text>My QR Code:</Text>
        {qrcodeDataUrl && (
          <Image
            src={qrcodeDataUrl} // 直接使用完整的Data URL，无需手动拆分
            style={styles.qrcode}
          />
        )}
      </Page>
    </Document>
  );
};

export default PdfFile;

关键改动说明 #

• 替换导入库：从React组件库qrcode.react改为纯JS生成库qrcode
• 简化Data URL处理：qrcode.toDataURL直接返回完整的data:image/png;base64,...格式字符串，无需手动拆分处理
• 保留原有的React-PDF渲染逻辑，确保二维码能正确嵌入并渲染在PDF文档中

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