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
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 {
}