react-native-html-to-pdf icon indicating copy to clipboard operation
react-native-html-to-pdf copied to clipboard

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

Open aclowkey opened this issue 1 year ago • 4 comments

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.

aclowkey avatar Apr 19 '23 10:04 aclowkey

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

Pranav2992 avatar May 19 '23 11:05 Pranav2992

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?

austincparker avatar Jun 02 '23 17:06 austincparker

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.

stale[bot] avatar Mar 13 '24 09:03 stale[bot]

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

rushg171 avatar Aug 27 '24 12:08 rushg171