Fishhawk
Search
Pricing

How to create a Print the current page button on a Webpage

-
Grafxion Team Grafxion Team
Web Design
2021-11-27

How to Add the Print Option on a Web Page

<!DOCTYPE html> 
<html>
<head>
  <script>          
    function display() {             
    window.print();          
    }       
  </script>
</head>   
<body>   
  <h2>PRINT</h2> 
  <p>Click the button to print the current page</p> <br/>    
  
  <button onclick="display()">Click to Print</button>          
</body> 
</html>

⚠️ ⚡ *In WordPress, if your code disappears or stop working after saved or worked couple times, then stopped working; use Raw HTML / Raw JS  instead of Text Block or WP Text!

 
💡 The best place to write your JavaScript code is at the end of the document after or right before the </body> tag to load the document first and then execute the JavaScript code.

✌ Symbols List here or  here

 

Using the script tag to include an external JavaScript file:

<script type="text/javascript" src="path-to-javascript-file.js"></script>

⊕  Add a png icon:

<img style="width:16px ; color:###;" src="path/icon.png">

⊕  The simplest way to add a space in HTML (besides hitting the spacebar) is with the non-breaking space entity, written as &nbsp; or &#160;.

&nbsp;

– Use the float and clear Properties to Align an Image to the Right in One Line in CSS:

img{
 float:right;
}

p{
 clear:right;
}

↓NOT WORKING↓

<a href=”#” onclick=”window.print();return false;”><button>Print this page</button></a>

How to Add a Print Button to a WordPress Page or Post

How to add a print button to WordPress page or post

or

How to print a page using JavaScript

 

 

Related Posts
Close
Search

Hit enter to search or ESC to close