Remove header and footer from window.print()
CssPrintingCss Problem Overview
I am using window.print() for printing page, but I got header and footer contains page title, file path, page number and date. How to remove them?
I tried print stylesheet also.
#header, #nav, .noprint
{
display: none;
}
Please help. Thanks.
Css Solutions
Solution 1 - Css
In Chrome it's possible to hide this automatic header/footer using
@page { margin: 0; }
Since the contents will extend to page's limits, the page printing header/footer will be absent. You should, of course, in this case, set some margins/paddings in your body element so that the content won't extend all the way to the page's edge. Since common printers just can't get no-margins printing and it's probably not what you want, you should use something like this:
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
As Martin pointed out in a comment, if the page have a long element that scrolls past one page (like a big table), the margin is ignored and the printed version will look weird.
At the time original of this answer (May 2013), it only worked on Chrome, not sure about it now, never needed to try again. If you need support for a browser that can't hable, you can create a PDF on the fly and print that (you can create a self-printing PDF embedding JavaScript on it), but that's a huge hassle.
Solution 2 - Css
I am sure Adding this code on your css file will solve the problem
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
Solution 3 - Css
Firefox :
- Add
moznomarginboxesattribute in<html>
Example :
<html moznomarginboxes mozdisallowselectionprint>
Solution 4 - Css
Today my colleague stumbled upon the same issue.
As the "margin:0" solution works for chromium based browsers, however, Internet Explorer continue to print footer even if @page margins are set to zero.
The solution (more of a hack) was to put negative margin on the @page.
@page {margin:0 -6cm}
html {margin:0 6cm}
Please note that negative margin won't work for Y axis, only for X
Hope it helps.
Solution 5 - Css
The CSS standard enables some advanced formatting. There is a @page directive in CSS that enables some formatting that applies only to paged media (like paper). See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* the margin on the content before printing */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>
and for firefox use it
In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).
In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.
Solution 6 - Css
avoiding the top and bottom margin will solve your problem
@media print {
@page {
margin-left: 0.5in;
margin-right: 0.5in;
margin-top: 0;
margin-bottom: 0;
}
}
Solution 7 - Css
@media print {
.footer,
#non-printable {
display: none !important;
}
#printable {
display: block;
}
}
Solution 8 - Css
@page { margin: 0; } works fine in Chrome and Firefox. I haven't found a way to fix IE through css. But you can go into Page Setup in IE on your own machine at and set the margins to 0. Press alt and then the file menu in the top left corner and you'll find Page Setup. This only works for the one machine at a time...
Solution 9 - Css
So basic idea is to have a div (with display none) containing items to print. Now on click of a button do not print to entire body but just that particular div. Faced lots of issues while printing a div (part of HTML) using window.print(). Used below method and it works seamlessly in edge, chrome and Mozilla for me, let see if it help you too.
function printDiv(id) {
var contents = document.getElementById(id).innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write("<html><head>\n\n " +
"<style type=\"text/css\" media=\"print\">\n " +
"@@page\n {\n " +
"size: auto; /* auto is the initial value */\n " +
"margin: 10mm; /* this affects the margin in the printer settings */\n " +
" }\n\n html\n {\n " +
" background-color: #FFFFFF;\n " +
" }\n\n body\n " +
" { font-family:\"Times New Roman\", Times, serif;\n " +
" border: none ;\n " +
" margin: 0; /* margin you want for the content */\n " +
" }\n .table {\n width: 100%;\n " +
" max-width: 100%;\n margin-bottom: 20px;\n " +
" border-collapse: collapse;\n " +
" background-color: transparent;\n display: table;\n " +
" }\n .table-bordered {\n " +
" border: 1px solid #ccc;\n }\n tr {\n " +
" display: table-row;\n vertical-align: inherit;\n " +
" border-color: inherit;\n padding:15px;\n }\n " +
" .table-bordered tr td {border: 1px solid #ccc!important; padding:15px!important;}\n " +
" </style><title></title></head><body>".concat(contents, "</body>"));
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
Call this like
<a href="#" onclick="javascript:printDiv('divwithcontenttoprint')"> Print </a>
Solution 10 - Css
This will be the simplest solution. I tried most of the solutions in the internet but only this helped me.
@print{
@page :footer {color: #fff }
@page :header {color: #fff}
}
Solution 11 - Css
<html>
<head>
<title>Print</title>
<script type="text/javascript">
window.print();
document.margin='none';
</script>
</head>
<body>
<p>hello</p>
<p>hi</p>
</body>
</html>
//place it in a script file or in the script tag.
This will remove all the margins and you won't be able to see the headers and footers.
Solution 12 - Css
1.For Chrome & IE
<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
2. For FireFox as l2aelba said,
Add moznomarginboxes attribute in Example :
<html moznomarginboxes mozdisallowselectionprint>
Solution 13 - Css
If you happen to scroll down to this point, I found a solution for Firefox. It will print contents from a specific div without the footers and headers. You can customize as you wish.
Firstly, download and install this addon : JSPrintSetup.
Secondly, write this function:
<script>
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(elem);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
//jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
jsPrintSetup.setSilentPrint(1);
//sent empty page header
jsPrintSetup.setOption('headerStrLeft', '');
jsPrintSetup.setOption('headerStrCenter', '');
jsPrintSetup.setOption('headerStrRight', '');
// set empty page footer
jsPrintSetup.setOption('footerStrLeft', '');
jsPrintSetup.setOption('footerStrCenter', '');
jsPrintSetup.setOption('footerStrRight', '');
// print my window silently.
jsPrintSetup.printWindow(mywindow);
jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog
mywindow.close();
return true;
}
</script>
Thirdly, In your code, wherever you want to write the print code, do this (I have used JQuery. You can use plain javascript):
<script>
$("#print").click(function () {
var contents = $("#yourDivToPrint").html();
PrintElem(contents);
})
</script>
Obviously, you need the link to click:
<a href="#" id="print">Print my Div</a>
And your div to print:
<div id="yourDivToPrint">....</div>
Solution 14 - Css
you don't have to write any code. just before calling window.print() in the first time change the print settings of your browser. for example in firefox:
- Press Alt or F10 to see the menu bar
- Click on File, then Page Setup
- Select the tab Margins & Header/Footers
- Change URL for blank -> image
and one another example for IE (I'm using IE 11 for previous versions you can see this Prevent Firefox or Internet Explorer from Printing the URL on Every Page):
- Press Alt or F10 to see the menu bar
- Click on File, then Page Setup
- in Headers and Footers section Change URL for empty.