Best IT Recipes

Remove header and footer from .print () window

I use window.print () to print the page, but my header and footer contain the page title, file path, page number and date. How to remove them?

I also tried the print stylesheet. A.

#header, #nav, .noprint { display: none; }

Please, help. Thank.

+94
css printing
Nov 22 '11 at 14:05
source share
9 answers

In Chrome, you can hide this automatic footer using

 @page { margin: 0; }

Since the content will expand to the limits of the page, there will be no header / footer when printing the page. Of course, in this case you should set some margins / indents in the body element so that the content does not reach the edge of the page. Since regular printers simply cannot print borderlessly and probably this is not what you need, 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 contains a long element that scrolls one page further (for example, a large table), the field is ignored and the print version will look strange.

At the time of writing this answer (May 2013), it worked only on Chrome, now it’s not sure, it was no longer necessary to try again. If you need support for a browser that cannot work, you can create a PDF file on the fly and print it (you can create a self-printing PDF file that has JavaScript embedded), but it is very troublesome.

+133
Mar 01 '13 at 4:55
source share

Firefox:

  • Add moznomarginboxes attribute to <html>

Example:

 <html moznomarginboxes mozdisallowselectionprint>
+21
Feb 19 '15 at 10:57
source share

I am sure that adding this code to 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>

You can visit it to learn more about it.

+18
Jun 09 '13 at 15:26
source share

Today, my colleague came across the same question.

Since the "margin: 0" solution works for chrome-based browsers, however, Internet Explorer continues to print the footer, even if the @page fields are set to zero.

The solution (more hacking) was to put a negative margin on @page.

 @page {margin:0 -6cm} html {margin:0 6cm}

Note that a negative field will not work for the Y axis, only for X

Hope this helps.

+11
Jul 21 '16 at 14:28
source share

The CSS standard allows for some advanced formatting. CSS has the @page directive, which allows some formatting that applies only to paged media (such as 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 the source page :: HTML tag).

In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.

+8
Jan 11 '16 at 13:51 on
source share
 @media print { .footer, #non-printable { display: none !important; } #printable { display: block; } }
+3
Apr 03 '17 at 5:50
source share

you do not need to write code. Before calling window.print () for the first time, change the print settings of your browser. for example in firefox:

  • Press Alt or F10 to see the menu bar.
  • Click File, then Page Setup
  • Select the Fields and Headers / Footers tab
  • Change URL for blank → image

and another example for IE (I use IE 11 for previous versions, you can see this Prevent Firefox or Internet Explorer from printing URLs on every page ):

  • Press Alt or F10 to see the menu bar.
  • Click File, then Page Setup
  • in the header and footer section. Change the url to empty.
0
Aug 14 '16 at 6:48
source share

1. For Chrome and 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>
  1. For firefox as l2aelba said

Add moznomarginboxes attribute to Example:

 <html moznomarginboxes mozdisallowselectionprint>
0
Sep 28 '16 at 6:45
source share

If you are fortunate enough to scroll to this point, I found a solution for Firefox. It will print content from a specific div without footer and headers. You can customize as you wish.

First, download and install this add-on: 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 print code, do this (I used jQuery. You can use simple javascript):

 <script> $("#print").click(function () { var contents = $("#yourDivToPrint").html(); PrintElem(contents); }) </script>

Obviously you need a link:

 <a href="#" id="print">Print my Div</a>

And your div for printing:

 <div id="yourDivToPrint">....</div>
0
May 29 '17 at 11:11
source share


More articles:


All Articles