如何使用react-pdf结合自定义组件生成PDF（不使用react-pdf内置组件）

你遇到的核心问题是react-pdf的和并不支持直接渲染标准DOM组件（包括antd组件）。react-pdf有自己独立的渲染引擎，只能识别它提供的专用组件（如<Text>、<View>、<Table>等），antd组件依赖浏览器DOM环境，直接放入<Page>里会被忽略，导致文本消失。

下面给你两种可行的解决思路：

思路一：用react-pdf专用组件重构内容 #

把选中的表格数据，用react-pdf提供的组件重新构建导出内容，避开antd组件的DOM依赖：

import { Document, Page, Text, View, Table, TableRow, TableCell } from '@react-pdf/renderer';

// 自定义PDF内容组件，接收选中的数据
const PdfContent = ({ selectedData }) => {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 15 }}>选中数据导出</Text>
      <Table>
        <TableRow>
          {/* 表头，根据你的表格字段调整 */}
          <TableCell style={{ backgroundColor: '#f0f0f0', padding: 8 }}><Text>ID</Text></TableCell>
          <TableCell style={{ backgroundColor: '#f0f0f0', padding: 8 }}><Text>名称</Text></TableCell>
          <TableCell style={{ backgroundColor: '#f0f0f0', padding: 8 }}><Text>数值</Text></TableCell>
        </TableRow>
        {/* 渲染选中的数据行 */}
        {selectedData.map(item => (
          <TableRow key={item.id}>
            <TableCell style={{ padding: 8 }}><Text>{item.id}</Text></TableCell>
            <TableCell style={{ padding: 8 }}><Text>{item.name}</Text></TableCell>
            <TableCell style={{ padding: 8 }}><Text>{item.value}</Text></TableCell>
          </TableRow>
        ))}
      </Table>
    </View>
  );
};

// 导出用的Document组件
const DocumentForPrint = ({ selectedData }) => {
  return (
    <Document>
      <Page size="A4">
        <PdfContent selectedData={selectedData} />
      </Page>
    </Document>
  );
};

思路二：保留antd样式，通过HTML转PDF实现 #

如果想完全保留antd组件的样式和交互效果，可以先用html2canvas把antd组件转成图片，再用jsPDF生成PDF：

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

// 导出函数，传入antd组件的DOM容器
const exportToPdf = async (containerRef) => {
  const canvas = await html2canvas(containerRef.current, {
    scale: 2, // 提高导出清晰度
    useCORS: true
  });
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgWidth = 210; // A4宽度（毫米）
  const pageHeight = 297; // A4高度（毫米）
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;

  pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;

  // 内容超过一页时自动添加新页面
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    pdf.addPage();
    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }

  pdf.save('选中数据导出.pdf');
};

// 使用示例：给antd组件添加ref
// <div ref={containerRef}>
//   <YourAntdCustomComponent data={selectedTableData} />
// </div>
// <Button onClick={() => exportToPdf(containerRef)}>导出PDF</Button>

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