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?

回答1:

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

回答2:

I just solved this with the following css after assigning id to print button.

<style type="text/css">
@media print {
    #myPrntbtn {
        display :  none;
    }
}
</style>

And my button as follows.

<input id ="myPrntbtn" type="button" value="Print" onclick="window.print();" >

Also, you can run javascript function with the following actions...

Hide the button
Print the page using window.print();
Again Show back the button

Piece of code...

<script type="text/javascript">
    function printMyPage() {
        //Get the print button
        var printButton = document.getElementById("myPrntbtn");
        //Hide the print button 
        printButton.style.visibility = 'hidden';
        //Print the page content
        window.print()
        //Show back the print button on web page 
        printButton.style.visibility = 'visible';
    }
</script>

Reference Hide Print button while printing a web page

来源：https://stackoverflow.com/questions/16960806/remove-print-button-from-hard-copy

标签

javascript

button

printing

hide

show-hide