how to remove header and footer into the 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 or edit?

I tried this also.

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

i try all solution of this page but any solution is not working for me.

this is my div content that is find from POJO.

<div id="textDiv">
    <pre id="foo"><%= student.getDescription()%></pre>
</div>

this is my button.

<button onclick="printDiv('textDiv')">Print PDF</button>

this is my Script for Print.

function printDiv(divName) {
 var printContents = document.getElementById(divName).innerHTML;
 var originalContents = document.body.innerHTML;
 document.body.innerHTML = printContents;
 window.print();
 document.body.innerHTML = originalContents;
}

// Use this method

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

Already answered here https://stackoverflow.com/questions/2573603/removing-page-title-and-date-when-printing-web-page-with-css/18960845 — P. Iakovakis, Dec 12 '18 at 13:26

score 1 · Answer 1 · answered Feb 16 '20 at 08:33

Try this below

<script language="javascript">
function printDiv() {
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>

The content div to be visible to print would be named below

<div id="divName">Print Content</div>

Then on the print button, you do the below

<button onClick="printDiv();">Print</button>

how to remove header and footer into the window.print();

1 Answers1