Remove header and footer from window.print()

Question

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.

Those elements are specific to the user's browser settings. I don't think you will be able to remove them through CSS or JavaScript. — Michael Berkowski, Nov 22 '11 at 14:08
I think this question needs a clarification: Are you trying to remove the header and footer elements of the HTML that displays on the screen or do you want to eliminate the headers and footers that are added by the print function? — AlanObject, Jan 27 '20 at 19:40

score 206 · Answer 1 · edited Oct 26 '22 at 02:13

206

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 content is too big and requires several pages, the print version will not look good: only the first page will have the 1.6cm top margin, and only the last page will have the 1.6cm bottom margin. Pages in between won't have top nor bottom margin.

At the time original of this answer (May 2013), it only worked on Chrome (edit: works on FF on Oct 2022), 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.

edited Oct 26 '22 at 02:13

user276648

6,018
6
60
86

answered Mar 01 '13 at 04:55

diego nunes

2,750
1
14
16

2

For some reason, `body { margin: 1.6cm; }` was ignoring the right margin for me (perhaps because I was using `text-align:right`), so instead I created a `
` for my content and used `.container { margin: 1.6cm; }` instead.
– rybo111 Aug 03 '13 at 09:38
9

I'm trying this with Chrome 33. It works great, but be careful, because `body { margin: 1.6cm; }` - as it's a margin for the whole document - won't respect the vertical margins for multi-page documents, except the very first and last. Sadly, I can't think of a workaround. – pau.moreno Feb 21 '14 at 23:23
Hey @Diego , I am happy with your suggestion and my header footer was remove but my print page was increase. "body { margin: 1.6cm; }" just change 1.6cm to 1.0cm and it is working.. :) Happy codding – Vishal Kiri Sep 07 '15 at 16:19
3

There is a more extensive answer here: http://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page – jedison Nov 25 '16 at 14:49
1

Removing the page margin and adding body margin was generating an empty page for me. I changed the body margin to padding and it worked. – André Guimarães Sakata Nov 07 '17 at 13:17
Both margin and padding on body will ignore the right margin/padding for me. – Jan V. May 28 '19 at 15:55
For me was better to set `@media print {@page{margin:10mm;}}` as it sets margin for page and remove header/footer. Setting margins for body doesn't work well in multi pages. – TNT Feb 03 '20 at 15:29

score 30 · Answer 2 · answered Jun 09 '13 at 15:26

30

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>

You may visit this to know more about this

answered Jun 09 '13 at 15:26

Rudias

335
3
2

4

No. It is not working. It is setting the margin that's it. It is still displaying url and date time on header and footer – Learner Mar 05 '14 at 10:41
Works for Chrome and Firefox, but not IE 11. – Sámal Rasmussen Jan 23 '20 at 20:55

score 20 · Answer 3 · answered Feb 19 '15 at 10:57

20

Firefox :

Add moznomarginboxes attribute in <html>

Example :

<html moznomarginboxes mozdisallowselectionprint>

answered Feb 19 '15 at 10:57

l2aelba

21,591
22
102
138

6

This is not going to work anymore after Firefox 48 is released (August 2016): https://bugzilla.mozilla.org/show_bug.cgi?id=1260480 – Aljullu Jul 15 '16 at 10:04
it doesn't work for me, FF 61, but the @page { margin: 0; } solution seems to work in FF as well. – Kiko Sep 14 '18 at 08:17

score 12 · Answer 4 · answered Jul 21 '16 at 14:28

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.

score 12 · Answer 5 · answered Feb 11 '21 at 15:48

12

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

answered Feb 11 '21 at 15:48

muthukumar selvaraj

995
10
22

1

If you want to BLOCK printing using this script, just add a body{ display:none:} before the @page part, and now when they print its a completely blank page. Hope this helps someone. – easleyfixed Apr 11 '22 at 20:51

nyn05 · Answer 6 · 2016-01-11T13:56:22.510

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>.

score 7 · Answer 7 · edited Oct 07 '19 at 23:38

7

@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}

edited Oct 07 '19 at 23:38

Nick Reed

4,989
4
17
37

answered Apr 03 '17 at 05:50

Sheak Abdulla

103
1
2

1

This looks to be the proper way to do it. Even in my case into an iframe context, it works great. – TwystO Nov 10 '17 at 09:31
2

I don't think this actually applies to the question of how to hide the default headers/footers that the browser adds to printed pages (with date and url and page number, etc). I think this is just a simplified example of creating a div you want printed, and hiding other divs you don't want printed. – gamingexpert13 Mar 29 '21 at 21:57

score 2 · Answer 8 · answered Jan 23 '20 at 21:07

@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...

score 1 · Answer 9 · answered Dec 28 '20 at 17:06

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>

score 1 · Answer 10 · answered Feb 24 '23 at 21:49

1

The best solution I've got, that also keeps the page view nice:

@media print {
  @page {
    margin: 0.3in 1in 0.3in 1in !important
  }
}

answered Feb 24 '23 at 21:49

ADAM10

141
1
7

nice, this worked for me, I wish I could increase the margin more but if I do then we can see metadata... – David 天宇 Wong Jun 30 '23 at 21:48

score 0 · Answer 11 · answered Feb 08 '19 at 13:01

0

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

answered Feb 08 '19 at 13:01

Yasitha

901
2
17
42

22

This does nothing. – nights Feb 15 '19 at 01:55

score -1 · Answer 12 · answered Sep 28 '16 at 06:45

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>

For FireFox as l2aelba said,

Add moznomarginboxes attribute in Example :

<html moznomarginboxes mozdisallowselectionprint>

In above code the

are optional. – Nikhilus Sep 28 '16 at 06:52 — Nikhilus, Sep 28 '16 at 06:52

score -1 · Answer 13 · answered May 29 '17 at 11:11

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>

score -1 · Answer 14 · answered Jan 31 '21 at 16:46

 <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.

alireza azami · Answer 15 · 2016-09-27T12:17:14.983

-5

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.

edited Sep 27 '16 at 12:17

answered Aug 14 '16 at 06:48

alireza azami

35
1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/13332578) – SurvivalMachine Aug 14 '16 at 08:06
thanks for the suggestion SurvivalMachine. I edited my answer some minutes ago :) – alireza azami Aug 14 '16 at 18:16
Hmmm... I don't fancy having to run around all my users and update their browsers (however many they use) to take account of this one app, especially if they live on the other side of the planet. Also, what if they need the settings back for another app? This isn't an answer. – Paul May 16 '18 at 09:05
This approach lacks the cross-browser functionality that a featured baked into the page/app would provide. – bananaforscale Jul 11 '18 at 20:38

Remove header and footer from window.print()

15 Answers15

Linked

Related