How to hide print button while printing?

I want to print the page on button click without opening a new tab.

I have a following lines of code that does the job for me.

function PrintDiv() {    
    var contents = document.getElementById("wrapper").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><title>DIV Contents</title>');
    frameDoc.document.write('</head><body>');
    frameDoc.document.write(contents);
    frameDoc.document.write('</body></html>');
    frameDoc.document.close();
    setTimeout(function () {
        window.frames["frame1"].focus();
        window.frames["frame1"].print();
        document.body.removeChild(frame1);
    }, 500);

    return false;
}

I got a print button inside the div with id wrapper

<div id="button-container">
    <a href="#" id="PrintDiv" class="btn btn-success btn-primary"><span class="glyphicon glyphicon-print" aria-hidden="true"></span>Print</a>
</div>

My problem is I am not being able to hide the print button while printing.

I have tried following lines to hide but its not working in my case.

$('#PrintDiv').css('visibility', 'hidden');

Answers:

Answer

You need to have a print based CSS style rule - you can also set other print based rules - such as document size, background color , image specs etc:

@media print {
   #button-container{
      display: none;
   }
}
Answer

You need @media print in you css. Just add this at your bottom ofyour CSS file,

@media print {
    #print {display: none;}
}
Answer

Simply use a media query to hide when printing

@media print {
   #button-container{
      display: none;
   }
}
Answer

  <div id="button-container">
     <a href="#" id="PrintDiv" class="btn btn-success btn-primary" style="visibility:block;"><span class="glyphicon glyphicon-print"n aria-hidden="true"></span>Print</a> </div>

document.getElementById('PrintDiv').style.visibility = 'hidden';

document.getElementById('PrintDiv').style.visibility = 'hidden';

Answer

Hi you can use below methods,

$('#PrintDiv').hide();

or

$('#PrintDiv').prop('disabled', 'true');

or

 @media print{
    #PrintDiv{
        display:none !important;
    }
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.