CODEWITHSUNDEEP
reactjs
mehak
mehak

Reputation: 109

how to set Header and Footer in react-pdf/renderer?

enter image description hereI am building reactJs app, I am using react-pdf/renderer to render the pdf. I want to show Header in the pdf. Below is the my code.

MainComponent.jsx
              <Document>
                 <Page size="A4" style={styles.page}>
                 <MyFixedHeader style={{flex: 0.2}}/>
                 <Image style={styles.image} src={Logo} />
                 <Text style={styles.text}>
                     {pdfData}
                     </Text>
                 </Page>
             </Document>


MyFixedHeader.jsx
import React, { useEffect, useState } from 'react';

export const MyFixedHeader = () => {

    return (<>
    hi
    </>)
}

By using this code, I am getting blank screen.

Thanks.

Upvotes: 6

Views: 20613

Answers (2)

Muhammad Bilal Bangash
Muhammad Bilal Bangash

Reputation: 1226

enter image description here

you can check here official site https://react-pdf.org/advanced and there are many different other ways to create Header and Footer for react-pdf

enter image description here

Added Horizontal Line

enter image description here

enter image description here

How to register Font?

enter image description here

enter image description here

enter image description here

Upvotes: 6

Muhammad Bilal Bangash
Muhammad Bilal Bangash

Reputation: 1226

enter image description here

I added a screenshot of how to add a footer on each page end. here is the link https://react-pdf.org/repl you can test it here @mehak

New Image Playground

enter image description here

are you applying these styles??

Upvotes: 13

Related Questions