How to hide the text "Print this Page" on the Print Page window in Print Button script?

[Cherry]

Hi Everyone,

I added a print this page button. I customized the style. It is working, but the Print this Page text still visible under the Print Page Window.

How to get rid of the PDF Text?

Please see attached screenshots. 

Thanks a lot.

-Cherry

 

Below is the styling and script I used.

 

<style>

button {
  background-color: blue;
  border: none;
  color: white;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius:4px;
}

</style>

<!-- -- PRINT BUTTON--->
<div style="margin-left: 330px; margin-top: 10px; margin-bottom: 10px;">
<button onclick="window.print()">PDF</button>
</div>

<!-- -- SCRIPT--->
<script type="text/javascript">
    function printpage() {
        //Get the print button and put it into a variable
        var printButton = document.getElementById("printpagebutton");
        //Set the print button visibility to 'hidden' 
        printButton.style.visibility = 'hidden';
        //Print the page content
        window.print()
        //Set the print button to 'visible' again 
        //[Delete this line if you want it to stay hidden after printing]
        //printButton.style.visibility = 'visible';
    }
</script>

 

[Tubby]

First thing I noticed is that you are not using the print function in the script that you have. You are using the default window.print() function.

 

<div style="margin-left: 330px; margin-top: 10px; margin-bottom: 10px;">
<button onclick="window.print()">PDF</button>
</div>

<!-- -- SCRIPT--->
<script type="text/javascript">
    function printpage() {
        //Get the print button and put it into a variable
        var printButton = document.getElementById("printpagebutton");
        //Set the print button visibility to 'hidden' 
        printButton.style.visibility = 'hidden';
        //Print the page content
        window.print()
        //Set the print button to 'visible' again 
        //[Delete this line if you want it to stay hidden after printing]
        //printButton.style.visibility = 'visible';
    }
</script>


Try changing those lines to this:

 

<div style="margin-left: 330px; margin-top: 10px; margin-bottom: 10px;">
<button onclick="printpage()">PDF</button>
</div>

<!-- -- SCRIPT--->
<script type="text/javascript">
    function printpage() {
        //Get the print button and put it into a variable
        var printButton = document.getElementById("printpagebutton");
        //Set the print button visibility to 'hidden' 
        printButton.style.visibility = 'hidden';
        //Print the page content
        window.print();
        printButton.style.visibility = 'visible';
    }
</script>

See if that works.

[Cherry]

Hi @Tubby, thank you for the solution. I changed the code but it is not working. The button itself is not working. 

[Meekeee]

Hi @Cherry - what is your current code? Do you have an error from the Console?