如何在 React-PDF 中对表格行进行分页，同时保持其他组件的固定？

问：

当然，这是您可以在 Stack Overflow 上提出的修改后的问题：

标题：如何在 React-PDF 中对表格行进行分页，同时保持其他组件的固定？

问题：

我正在使用 React-PDF 处理一个项目，我需要生成一个 PDF 文档，其中包含一个可能包含许多行的表格。我想对表格行进行分页，以确保它们在超过特定限制时继续出现在新页面上，但我还需要固定其他组件，例如标题部分，这些组件应该出现在每个页面上。

在我的PDF文档中，我有以下组件：

1.标题部分。 2.包含数据行的表格。

我已经能够创建标题部分和表格，但我正在努力弄清楚如何在保持标题固定在每页上的同时对表格行进行分页。

下面是我的组件的简化结构：

**table.js**

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

const styles = StyleSheet.create({
  table: {
    display: 'table',
    width: 'auto',
    borderStyle: 'solid',
    textAlign: 'left',
  },
  tableRow: {
    margin: 'auto',
    flexDirection: 'row',
  },
  tableCol: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
  },
  tableCell: {
    marginTop: 5,
    fontSize: 10,
  },
})

const Table = () => {
  const tableData = [
    {
      sno: 0,
      hsn: 30049061,
      mfg: 'MIC',
      productName: 'DOLO 650',
      pack: 15,
      batchNo: 'TESTNEW',
      expiry: '02/2025',
      qty: 1,
      free: '',
      rate: 24.0,
      amount: 24.0,
      mrp: 31.0,
      disc: 12,
      gst: 12,
    },
  ]

  return (
    <View>
      <View style={styles.table}>
        <View style={{ ...styles.tableRow, backgroundColor: '#c0c0c0' }}>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>S.No</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '8%' }}>
            <Text style={styles.tableCell}>HSN</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>MFG</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '28%' }}>
            <Text style={styles.tableCell}>Product Name</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>Pack</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '8%' }}>
            <Text style={styles.tableCell}>Batch No</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '6%' }}>
            <Text style={styles.tableCell}>Expiry</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>Qty</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '6%' }}>
            <Text style={styles.tableCell}>Free</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '5%' }}>
            <Text style={styles.tableCell}>Rate</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '5%' }}>
            <Text style={styles.tableCell}>Amount</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '4%' }}>
            <Text style={styles.tableCell}>MRP</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '7%' }}>
            <Text style={styles.tableCell}>Disc%</Text>
          </View>
          <View style={{ ...styles.tableCol, width: '7%' }}>
            <Text style={styles.tableCell}>GST%</Text>
          </View>
        </View>
        {tableData.map((data, index) => (
          <View style={styles.tableRow} key={index}>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.sno}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '8%' }}>
              <Text style={styles.tableCell}>{data.hsn}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.mfg}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '28%' }}>
              <Text style={styles.tableCell}>{data.productName}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.pack}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '8%' }}>
              <Text style={styles.tableCell}>{data.batchNo}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '6%' }}>
              <Text style={styles.tableCell}>{data.expiry}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.qty}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '6%' }}>
              <Text style={styles.tableCell}>{data.free}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '5%' }}>
              <Text style={styles.tableCell}>{data.rate}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '5%' }}>
              <Text style={styles.tableCell}>{data.amount}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '4%' }}>
              <Text style={styles.tableCell}>{data.mrp}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '7%' }}>
              <Text style={styles.tableCell}>{data.disc}</Text>
            </View>
            <View style={{ ...styles.tableCol, width: '7%' }}>
              <Text style={styles.tableCell}>{data.gst}</Text>
            </View>
          </View>
        ))}
      </View>
    </View>
  )
}

export default Table

**App.js**

import React from 'react'
import Title from './components/Title'
import { PDFViewer, Page, Document, View, Text } from '@react-pdf/renderer'
import Table from './components/Table'

const App = () => {
  return (
    <PDFViewer style={{ width: '100%', height: '100vh' }}>
      <Document>
        <Page orientation="landscape">
          <View style={{ border: 1, margin: 20 }}>
            <Title />
            <Table />
          </View>
        </Page>
      </Document>
    </PDFViewer>
  )
}

export default App

为了更好地理解，我还将提供我的标题.js文件

**title.js**

import React from 'react'
import { View, Image } from '@react-pdf/renderer'
import { StyleSheet } from '@react-pdf/renderer'
import smartpharma from '../smartpharma360.jpg' // Import the image
import From from './From'
import TaxInvoice from './TaxInvoice'
import To from './To'

const styles = StyleSheet.create({
  titleFlex: {
    flexDirection: 'row',
  },
  titleImage: {
    width: 80,
    height: 80,
    border: 1,
  },
})

const Title = () => (
  <View fixed>
    {/* what if you want to wrap pages but also be able to render a component on all pages? This is where the fixed prop comes into play. */}
    <View style={styles.titleFlex}>
      <Image src={smartpharma} style={styles.titleImage} />
      <From />
      <TaxInvoice />
      <To />
    </View>
  </View>
)

export default Title