christopherdro / react-native-html-to-pdf

Convert html strings to PDF documents using React Native
MIT License
434 stars 264 forks source link

How can I add a footer & header to each page? #292

Open aclowkey opened 1 year ago

aclowkey commented 1 year ago

I want some static content to appear at every page's header, and page number on the footer with static text. I tried

  1. Calculating page height/ and using it to determine page size - way to cumbersome
  2. Using head style sheet with @page CSS rule - doesn't work

Any ideas?

I thought adding paddings to the android native version and then use the backend to stamp the documents within the header dimensions. I saw there is margin support there.

Pranav2992 commented 1 year ago

You can add header and footer by using css like below

MicrosoftTeams-image (6)
austincparker commented 1 year ago

You can add header and footer by using css like below MicrosoftTeams-image (6)

@Pranav2992 this does work to put them on the page, but it will overlap everything else. I tried adding margin-top and margin-bottom on the pages by doing

@page {
margin-top: 100px;
margin-bottom: 100px
}

but this also moved the header down and the footer up on each page. Were you able to figure that part out?

stale[bot] commented 5 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

rushg171 commented 1 day ago

@austincparker I'm facing the same issue. How did you solve it?