I want to render render a pdf which is a lab test which consists of Header(border, logo, hospital address,… etc) and in footer (some text) which has fixed height.
Ex layout:



Here, the header and footer have fixed height and the Lab test may contain tables, numerical data or observations and the text size/data will be huge for some tests. So if the text/data is huge then new page will be generated which is happening but taking some portion of footer as well and then new page is getting generated where rest of the text is displayed.

I am using "@react-pdf/renderer": "^3.1.9". I am attaching the screenshots as well. How do i resolve this?enter image description here

const InvoicePdf = ({ data }: Props) => (
  <Document title='Results'>
    <Page wrap size='A4' style={styles.page}>
      {data.invoiceWithHeaderValue ? <TopLine /> : null}
      {data.invoiceWithHeaderValue ? <Logo /> : null}
      {data.invoiceWithHeaderValue ? (
        <HeaderData data={data} />
      ) : (
        <View debug fixed style={{ height: '55' }}></View>
      <InvoiceHeader data={data} />
      {data.panels.map((p: any, i: any, arr: any) => (
          isLast={arr.length === i + 1}
      <EndOfReport invoiceWithHeaderValue={data.invoiceWithHeaderValue} />
      <PageCount invoiceWithHeaderValue={data.invoiceWithHeaderValue} />
      {data.invoiceWithHeaderValue ? <InvoiceFooter /> : null}

Here, InvoiceHeader is taking the height of InvoiceFooter which should not be happening.

New contributor

Umesh Kumar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.