React项目中如何为二维码添加底部标签并导出为PDF？

核心思路 #

需求本质是「生成带标签的可视化内容」+「将内容导出为PDF」，主流方案分两类：基于现有DOM结构转PDF（灵活易定制）、直接用PDF语法定义内容（原生高质量）。

方案一：DOM转PDF（灵活适配自定义样式） #

适合需要复杂标签布局、依赖CSS样式的场景，用「二维码生成库 + html2canvas + jsPDF」组合实现。

步骤与代码示例 #

1. 安装依赖

npm install react-qr-code html2canvas jspdf

2. 实现组件

import React, { useRef } from 'react';
import QRCode from 'react-qr-code';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

const QrWithLabelExporter = () => {
  const contentRef = useRef(null);

  const exportToPdf = async () => {
    // 捕获目标DOM
    const targetElement = contentRef.current;
    const canvas = await html2canvas(targetElement);
    const imgData = canvas.toDataURL('image/png');
    
    // 生成PDF
    const pdf = new jsPDF('p', 'mm', 'a4');
    const imgWidth = 100;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    
    // 将Canvas内容添加到PDF并居中
    pdf.addImage(imgData, 'PNG', (pdf.internal.pageSize.getWidth() - imgWidth)/2, 40, imgWidth, imgHeight);
    pdf.save('qr-with-label.pdf');
  };

  return (
    <div>
      {/* 带标签的二维码容器 */}
      <div ref={contentRef} style={{ padding: '20px', textAlign: 'center', width: 'fit-content', margin: '0 auto' }}>
        <QRCode value="https://your-target-url.com" size={200} />
        <h3 style={{ margin: '15px 0 8px' }}>自定义标签标题</h3>
        <p style={{ color: '#666', margin: 0 }}>扫描二维码访问专属链接</p>
      </div>
      <button onClick={exportToPdf} style={{ marginTop: '20px', padding: '8px 16px' }}>导出PDF</button>
    </div>
  );
};

export default QrWithLabelExporter;

方案二：原生PDF生成（高质量输出） #

适合追求PDF矢量质量、无需依赖DOM的场景，用「@react-pdf/renderer + qrcode」组合，直接用React语法定义PDF内容。

步骤与代码示例 #

1. 安装依赖

npm install @react-pdf/renderer qrcode

2. 实现组件

import React, { useState, useEffect } from 'react';
import { Document, Page, Text, View, Image, StyleSheet, BlobProvider } from '@react-pdf/renderer';
import qrcode from 'qrcode';

// 定义PDF文档结构
const QrPdfDocument = ({ qrValue, label }) => {
  const [qrDataUrl, setQrDataUrl] = useState('');

  useEffect(() => {
    // 将二维码转为DataURL
    qrcode.toDataURL(qrValue, (err, url) => {
      if (!err) setQrDataUrl(url);
    });
  }, [qrValue]);

  const styles = StyleSheet.create({
    page: {
      flexDirection: 'column',
      alignItems: 'center',
      padding: 30,
    },
    qrImage: {
      width: 200,
      height: 200,
      marginBottom: 20,
    },
    labelTitle: {
      fontSize: 18,
      fontWeight: 'bold',
      marginBottom: 8,
    },
    labelDesc: {
      fontSize: 14,
      color: '#666',
    },
  });

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        {qrDataUrl && <Image src={qrDataUrl} style={styles.qrImage} />}
        <Text style={styles.labelTitle}>{label}</Text>
        <Text style={styles.labelDesc}>扫描二维码访问目标链接</Text>
      </Page>
    </Document>
  );
};

// 导出组件
const QrPdfExporter = () => {
  return (
    <div>
      <BlobProvider document={<QrPdfDocument qrValue="https://your-target-url.com" label="自定义标签标题" />}>
        {({ url, loading }) => {
          if (loading) return <div>生成中...</div>;
          return <a href={url} download="qr-with-label.pdf" style={{ padding: '8px 16px', display: 'inline-block' }}>导出PDF</a>;
        }}
      </BlobProvider>
    </div>
  );
};

export default QrPdfExporter;

最佳实践 #

• 样式定制优先选方案一：DOM支持所有CSS属性，能实现复杂标签布局（比如多行文本、图标、背景色）
• 高质量输出优先选方案二：PDF中文本为矢量，不会出现缩放模糊，仅二维码为位图（可通过调整二维码尺寸优化清晰度）
• 二维码尺寸建议：设置不小于200px，确保PDF中扫描清晰
• 导出时添加加载状态：避免用户重复触发导出操作

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