0

I'm trying to print my custom React functional component (save as PDF) by using ReactToPrint package. So far everything goes fine, until I wanted to modify Footer of document in print dialog (see picture). Basically I just want to get rid of whole footer, or just to not display emphasized link. Anybody with experience doing this?

Note: It is possible to uncheck option for Footer and Header in print dialog, but I want to keep Header and hide just footer (or implement custom one and override default one)

I went through issues in github but without any success, mainly trying to pass custom CSS into component. Image with print dialog: Print dialog, with checked footer and header

Juraj
  • 1
  • 2
  • I have just found this css that hides both Footer and Header: '@page { margin: 0px auto; }' I will try to find solution for hiding only footer and i will update this thread – Juraj Apr 04 '23 at 13:17

1 Answers1

0

Solution:

In order to disable (or just not show) Footer in Print dialog, it is fair enough just to set margin for whole page:

@page {
  // Disable footer - no bottom margin so there is no place for footer
  margin-bottom: 0;
}

If we want to disable also header, we can simply set also top margin, so there will be no place on the top and bottom of the page:

@page {
  // Disable footer - no bottom margin so there is no place for footer
  margin-bottom: 0;
  // Disable header - same reason as for footer
  margin-top: 0;
}

And of course, if we want to have this behaviour only while printing, wrap mentioned css in:

@media print {
  
}
Juraj
  • 1
  • 2