Skip to main content

Print a webpage using javascript

Print a webpage using javascript

Creating a simple Html button using as a print button whereby it prints current webpage. This action goes to javascript. 
With this simple method, it is supported by all browsers including chrome, Firefox, explorer and opera.
This method is called window print() method.

Example

Print the current page:

window.print();

Definition and Usage

The print() method prints the contents of the current window.

The print() method opens the Print Dialog Box, which lets the user to select preferred printing options.

With this, I'll demostrate to you an example as seen below.

<button onlick="window.print();">Print</button>

#js #printbutton #javascript #javascript_print_button

Comments

Popular posts from this blog

Progress Bar with percentage

 <html>     <head>         <title>ProgressBar</title>     </head>     <style>     #bg{         position: absolute;         top:0; left:0;         width: 100%; height: 100%;         padding-top: 45%;     }     #pbg{         width:400px;         padding:5px;         border-radius:10px;         background-color: #fff;         border:solid 2px green;     }     #pb{         height:30px;         background-color: green;         text-align: center;         font-size: 18px;         font-weight: bold;         padding-top: 7px;         font-fam...

Copy to clipboard using HTML, CSS and JavaScript

 <html> <head> <title>COPY TO CLIPBOARD</title> <style> table{   margin:0 auto;   width: 500px;   margin-top: 100px; } td{   padding-bottom: 50px; } .title{   font-weight: bold;   font-family: calibri;   font-size: 42px;   color: #fff;   text-shadow: 2px 2px 20px black; } .note{   font-size: 20px;   font-family: Arial; } #key{   width:330px;   padding: 5px;   border:solid 2px navy;   border-radius: 5px;   text-align: center;   font-family: Arial;   font-size: 24px;   background-color: #fff; } #txt{   width:480px; height:200px;   border: solid 2px navy;   border-radius: 5px;   padding: 10px;   text-align: center;   font-family: calibri;   font-size: 26px; } #btn, #gen{   font-family: calibri;   font-size: 18px;   font-weight: bold;   border:none;   color:#fff;   border-radius: 5px;   padding...

Difference between CSS and CSS3

Difference between CSS and CSS3 CSS works with HTML and provides a basic style and look to the website. CSS3 is the latest version of CSS. Some of the essential differences between CSS and CSS3 are: ✍️  Compatibility CSS -  The primary purpose of CSS was to focus on formatting features. They have capabilities for positioning texts and objects. CSS is backward compatible with CSS3. CSS3 -  When CSS3 code is written in CSS, it is invalid. CSS3 makes the Web Page more attractive. It takes less time to create a page. ✍️ Design CSS - It does not support responsive design. CSS3 - It is latest version and it supports responsive design. ✍️  Rounded corners and gradient CSS -  When CSS3 was launched, the developers designed some images that looked like the rounded corners with the  structures  and  backgrounds . Developers are designing a  border  and  uploading  the design to the server. CSS3 -  In CSS3 the developer writes the co...