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. 

[Kurumi]

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

[hardypike8683]

To remove the "Print this Page" text from the print window, you need to adjust your CSS and JavaScript. Here's what you can do:

1. CSS Adjustment: Hide the text using CSS by setting its display property to none.

   css

   @media print { .noprint { display: none; } }

2. HTML Modification: Add the "noprint" class to the text you want to hide.

   html

   <div class="noprint"> Print this Page </div>

3. JavaScript Modification: Adjust the JavaScript to remove the visibility change of the print button.

   javascript

   <script type="text/javascript"> function printpage() { // Print the page content window.print(); } </script>

By implementing these changes, the "Print this Page" text should no longer appear in the print window. I have also faced this problem in my farming project but following these steps problem was solved.