Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Can we make print button without JavaScript?
In this tutorial, we will learn to make the print button without using JavaScript. Most of you have seen the print button on any website or application, and when users click on the print button, it prints the whole webpage or any particular file.
However, the HTML doesn’t contain the print method. We can use the print() method of the window object. The window object is the global object, which can be accessed anywhere inside the code. So, either user can invoke the window.print() method from the JavaScript or HTML code.
Syntax
Users can follow the syntax below to invoke JavaScript's print() method.
<script> window.print(); // prints the whole web page </script>
Using the onClick Event
In this approach, we will invoke the window.print() method from HTML directly using the onClick event of JavaScript.
Syntax
To use the window.print() method with the HTML users can follow the syntax below.
<button onClick = "window.print()"> print web page </button>
Example
In the example below, we created the button and added the onClick event. When users click on the button, it will invoke the window.print() method.
<html> <body> <h2>Make the print button without JavaScript.</h2> <button onclick = "window.print()" >Print web page</button> <p> Click the above button to print the page. </p> </body> </html>
In the above output, users can see that when they click on the print web page button, it opens the pop-up window to print the whole web page.
Add Print Method inside the <a> Tag
In this approach, we will add the window.print() method as a URL of <a> tag. We can add any JavaScript method as a href attribute value with the JavaScript tag.
Syntax
Users can follow the syntax below to use the window.print() method with the <a> tag.
<a href = "javascript:window.print()" > Print web page </a>
Example
In the example below, we have created the link to print the web page. We have added the ‘javascript:window.print()’ as the href value of <a> tag to make working it as a print button.
<html> <body> <h2>Make the print button without JavaScript.</h2> <a href="javascript:window.print()" >Print web page</a> <p>Click above button to print the page.</p> </body> </html>
Example
In the program below we create a print button and add an image to it. You can try to run the following code to make a print button as image i.e. whenever a user clicks on the image, the print options are visible −
<!DOCTYPE html> <html> <body> <a href="javascript:window.print()"><img src="https://www.tutorialspoint.com/computer_fundamentals/images/inkjet_printer.jpg" height="50" alt="print the page"></a> <p>Click above to print the page.<p> </body> </html>
This tutorial teaches users to make a print button without using JavaScript. However, we have used the single-line JavaScript code. As HTML can’t add the behaviour to the webpage, we need to use JavaScript to add the print behaviour.
531 Views
