如何使用react-pdf库创建PDF报表表格？解决组件限制难题

我完全懂你遇到的痛点——react-pdf自带的组件确实少得可怜，又不能直接扔HTML标签进去做表格，刚开始折腾的时候我也头大了好一阵。不过别担心，咱们可以用它提供的基础组件自己封装表格，或者用社区现成的方案，下面给你详细说两种靠谱的思路：

方法一：手动封装基础表格组件 #

react-pdf的View和Text其实足够搭建表格的核心结构，关键是通过样式来模拟表格的边框、间距和排版。我们可以先封装几个可复用的组件，之后用起来就跟普通表格一样顺手。

先写封装代码：

import { View, Text, StyleSheet } from '@react-pdf/renderer';

// 定义全局表格样式
const styles = StyleSheet.create({
  table: {
    width: '100%',
    borderCollapse: 'collapse', // 确保单元格边框合并，不会出现双重边框
  },
  tableRow: {
    flexDirection: 'row', // 让单元格横向排列
  },
  tableHeaderCell: {
    width: '25%', // 按需求分配列宽，4列就是每列25%
    backgroundColor: '#f5f5f5',
    padding: 8,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  tableCell: {
    width: '25%',
    padding: 8,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  cellText: {
    fontSize: 10,
    textAlign: 'center',
  },
});

// 表格容器组件
export const Table = ({ children }) => (
  <View style={styles.table}>{children}</View>
);

// 表格行组件
export const TableRow = ({ children }) => (
  <View style={styles.tableRow}>{children}</View>
);

// 表头单元格组件
export const TableHeaderCell = ({ children }) => (
  <View style={styles.tableHeaderCell}>
    <Text style={styles.cellText}>{children}</Text>
  </View>
);

// 普通单元格组件
export const TableCell = ({ children }) => (
  <View style={styles.tableCell}>
    <Text style={styles.cellText}>{children}</Text>
  </View>
);

然后在你的PDF文档里直接使用这些组件：

import { Document, Page } from '@react-pdf/renderer';
import { Table, TableRow, TableHeaderCell, TableCell } from './TableComponents';

const ReportDocument = () => {
  // 模拟报表数据
  const reportData = [
    { id: 1, name: '张三', age: 28, department: '研发部' },
    { id: 2, name: '李四', age: 32, department: '市场部' },
    { id: 3, name: '王五', age: 25, department: '人事部' },
  ];

  return (
    <Document>
      <Page>
        <Table>
          {/* 表头行 */}
          <TableRow>
            <TableHeaderCell>ID</TableHeaderCell>
            <TableHeaderCell>姓名</TableHeaderCell>
            <TableHeaderCell>年龄</TableHeaderCell>
            <TableHeaderCell>部门</TableHeaderCell>
          </TableRow>
          {/* 数据行 */}
          {reportData.map(item => (
            <TableRow key={item.id}>
              <TableCell>{item.id}</TableCell>
              <TableCell>{item.name}</TableCell>
              <TableCell>{item.age}</TableCell>
              <TableCell>{item.department}</TableCell>
            </TableRow>
          ))}
        </Table>
      </Page>
    </Document>
  );
};

export default ReportDocument;

手动封装的注意点 #

• 如果需要不同宽度的列，给对应的TableCell单独传style属性覆盖宽度即可
• 长文本可以给单元格加flexWrap: 'wrap'样式实现自动换行
• 跨页表格需要自己处理分页逻辑，或者参考下面的社区方案

方法二：使用社区专用表格组件（react-pdf-table） #

如果需要更复杂的表格功能（比如单元格合并、自动分页、表头固定），没必要自己从零写，直接用社区维护的react-pdf-table就行，它专门为react-pdf做了优化。

首先安装依赖：

npm install react-pdf-table @react-pdf/renderer
# 或者用yarn
yarn add react-pdf-table @react-pdf/renderer

使用示例：

import { Document, Page } from '@react-pdf/renderer';
import { Table, TableHeader, TableBody, DataCell, HeaderCell } from 'react-pdf-table';

const ReportDocument = () => {
  const reportData = [
    { id: 1, name: '张三', age: 28, department: '研发部' },
    { id: 2, name: '李四', age: 32, department: '市场部' },
    { id: 3, name: '王五', age: 25, department: '人事部' },
  ];

  return (
    <Document>
      <Page>
        <Table data={reportData}>
          <TableHeader>
            <HeaderCell>ID</HeaderCell>
            <HeaderCell>姓名</HeaderCell>
            <HeaderCell>年龄</HeaderCell>
            <HeaderCell>部门</HeaderCell>
          </TableHeader>
          <TableBody>
            {reportData.map(item => (
              <tr key={item.id}>
                <DataCell>{item.id}</DataCell>
                <DataCell>{item.name}</DataCell>
                <DataCell>{item.age}</DataCell>
                <DataCell>{item.department}</DataCell>
              </tr>
            ))}
          </TableBody>
        </Table>
      </Page>
    </Document>
  );
};

export default ReportDocument;

这个库支持colspan/rowspan合并单元格、分页时自动重复表头、自定义样式等功能，适合做复杂的企业级报表。

一些实用小技巧 #

• 样式尽量用StyleSheet.create定义，避免重复代码和性能问题
• 如果需要导出带样式的表格，可以先在本地预览调整样式，再生成PDF
• 表格内容过多时，手动封装的方案可以通过计算高度来拆分数据，实现分页

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