React-to-print: Remove background texts(header and footer) in print preview.

[erangia]

I'm trying to generate receipt with this module and it works perfectly fine for my requirements. but when I print the document, there are few background text getting printed along with the document content.(Date,Page title in the header section and web url in the footer section) I want to remove those texts(necessarily the url printed in the bottom). Any code level fixes for this?

[MatthewHerbst]

Hello. Would you mind sharing a screenshot of what's currently being printed and showing us what you don't want included? Generally the way to prevent something from being printed would be via CSS styles to not include them in the printing group.

[erangia]

Here's a screenshot I took from your online demo:

https://pasteboard.co/I67YMxA.png

I'm referring to these blue colour rounded texts. those texts are not included in the component print section. they are background texts displayed in the print preview. I want to avoid the bottom url getting printed.

[MatthewHerbst]

Ah. You should be able to turn those off in your print dialog. For example, on Chrome 72, in the print dialog under "More settings" there is a "Headers and footers" option which when unchecked removes the things you don't want included.

Does that solve your issue?

[erangia]

Well I noted that we can remove these manually, But I want to remove this when the print view opens for the first time. I mean without manually unchecking the options. Is there any possibility?

[MatthewHerbst]

To my knowledge there is no cross-browser solution to this. Do you know of one by chance?

[erangia]

Sorry I just noticed that this is a common behaviour when we try to print a webpage. My bad, at first I thought this is generated through the module itself. I also not aware of a cross browser solution for this actually. So it seems we should go for the option of manually unchecking the print options.

Anyway thank you for your replies :)

[mayurdere]

To remove header and footer
@media print {
h4.class-name
@page{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
}
To change the header text and PDF File name
componentDidMount() {
document.title = 'My Candidate Profile'; //PDF File Name
}

http://cuttingchai.info