Search code examples
javascriptbuttonprintinghideshow-hide

Remove print button from hard copy

With reference to this link and this, I printing a report using javascript as 

 <!DOCTYPE html>
<html>
<head>
<script>
function printpage()
{
var data = 'Sample Report<br />Sample Report<br />Sample Report<br />';
    var data = data+'<br/><button onclick="window.print()">Print the Report</button>';       
    myWindow=window.open('','','width=800,height=600');
    myWindow.innerWidth = screen.width;
    myWindow.innerHeight = screen.height;
    myWindow.screenX = 0;
    myWindow.screenY = 0;
    myWindow.document.write(data);
    myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="Print Preview" onclick="printpage()" />

</body>
</html>

But after printing, the print button still remains at the hard copy. So how to hide the print button in hard copy when printing by using the above function?

Solution

  • Give your button a class, e.g. class="noprint". Then Add a stylesheet for print media to your CSS:

    @media print {
  /* style sheet for print goes here */
  .noprint {
    visibility: hidden;
  }
}

    Details: http://www.w3.org/TR/CSS2/media.html