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

问题描述 投票：0回答：1

当然，您可以在 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

为了让您更好地理解，我还将提供我的 title.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
reactjs pagination mapping react-table react-pdf
1个回答
0
投票

经过彻底的调查和实验，我实现了一种解决方案，可以对表格行进行无缝分页，同时确保标题部分在每个页面上保持不变。

对于那些面临类似挑战的人，我已在公共存储库中提供了解决方案：https://github.com/taiyebnirjhar/Painful-PDF

您还可以通过部署的演示现场体验该解决方案：现场演示：https://painfulpdf.web.app/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.