Remove print button from hard copy

Question

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?

score 7 · Accepted Answer · answered Jun 06 '13 at 11:24

7

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

answered Jun 06 '13 at 11:24

Gerald Schneider

17,416
9
60
78

When you add the necessary style sheets to the new window it should work, yes. – Gerald Schneider Jun 06 '13 at 12:10
But not working. See the [sample here](http://jsfiddle.net/4d3jj/) @Gerald Schneider – mpsbhat Jun 06 '13 at 12:33
@PradeepShankar you have placed the css in the parent window, it has no effect in the newly opened window. I found [this topic about adding css via javascript](http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript), but I could't get it working yet. I'll take a deeper look at it when I'm done working. It should be something like this fiddle: http://jsfiddle.net/GeraldS/aVeTV/1/ – Gerald Schneider Jun 06 '13 at 13:05
Please see the answer at http://stackoverflow.com/questions/17759945/print-button-in-hard-copy/17761020?noredirect=1#17761020 – mpsbhat Jul 20 '13 at 10:57

score 0 · Answer 2 · answered Feb 12 '17 at 14:43

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

Remove print button from hard copy

2 Answers2

Linked

Related