In this segment, we will explore the print function in the JavaScript programming language. The print function serves the purpose of printing the currently displayed content such as a web page, text, images, and more, directly onto the computer screen. When the print function is invoked in JavaScript and the code is run, it brings up a print dialog box that enables the user or developer to choose the suitable printing options for the current contents of the window.
Syntax
The syntax provided below can be utilized to display the existing content of the window:
window.print()
In the syntax provided above, the window.print function is utilized to print the content that is currently displayed on the window screen.
Parameters : It does not contain any parameters.
Returns: The method window.print does not yield any return value.
Supported Browser of the print method
Following are the browsers that support the window.print method.
- Google Chrome
- Internet Explorer
- Firebox
- Opera
- Safari
Example 1: Program to print a web page using print method
In this application, we utilize the window.print function, which is responsible for printing the content currently visible on the window's display.
print.html
<html>
<head>
<title>
Use print() method in JavaScript
</title>
<script type = "text/ javascript">
<!--
// -->
</script>
</head>
<body>
<h2> Program to print the Current Content of the window using print() method </h2>
<br> <br>
<p>
As the name suggests, the print () method is used to print the contents of the current window. When we use a print () method, it opens the print dialog box, which allows the user or programmer to select an appropriate option for printing the current content of the window. </p>
<form>
<!-- When a user click on the print button, the onclick function calls the window.print() method to print the currently visible content in the window screen. -->
<input type = "button" value = "Print" onclick = "window.print()" />
</form>
</body>
</html>
Upon running the aforementioned programming code in any web browser, the following image is presented:
In the image displayed above, a Print button is visible. When we select the Print button, it triggers the appearance of a print dialog box that showcases the current visual content of the window screen, as illustrated below.
Example 2: Program to print the Student Registration Form using the print method
In this application, we develop a student enrollment form and subsequently utilize the window.print function to print it.
Student.html
<!-- Create a web page to print the Student registration Form in JavaScript using print() method. -->
<html>
<head>
<title>
Print Student Registration Form
</title>
<script type = "text/javascript">
function printFun()
{
window.print();
}
</script>
<!-- Start the coding for CSS -->
<style>
/* Create the Outer layout of the Calculator. */
.formstyle
{
width: 400px;
height: 400px;
margin: 20px auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
text-align: center;
background-color: lightgreen;
}
/* Display top horizontal bar that contain some information. */
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body bgcolor = "lightgrey">
<h1> Program to print the Student Registration Form using JavaScript print() method </h1>
<div class = "formstyle"
<form name = "form1">
<fieldset>
<br>
<legend> Student Registration Form: </legend>
<label> First name </label>
<input type = "text" name = "fname" size = "30" /> <br>
<br>
<label> Last name </label>
<input type = "text" name = "lname" size = "30" /> <br>
<br>
<label> Father name </label>
<input type = "text" name = "f_name" size = "30" /> <br>
<br>
<label> Mother name </label>
<input type = "text" name = "m_name" size = "30" /> <br>
<br>
<label> Gender:
</label>
<input type = "radio" name = "gender" /> Male
<input type = "radio" name = "gender" /> Female <br>
<br>
<label>
Address
</label>
<textarea cols = "30" rows = "3" value = "address">
</textarea>
<br>
<br>
<label>
Email
</label>
<input type = "email" id = "email" name = "email" size ="30" /> </br>
<br>
<label>
Password:
</label>
<input type = "password" id = "pass" name = "pwd" size = "30"> <br>
<br>
<input type = "reset" value = "Reset"/>
<input style = "background-color:skyblue;" width = 30px height = 20px type = "button" value = "Print" onclick = "printFun()"/>
<br> <br>
</fieldset>
<br>
</form>
</div>
</body>
</html>
Upon running the aforementioned code in any web browser, the following image will be presented:
Next, we complete all the necessary information in the student registration form and proceed to click on the Print button, which displays the image shown below.
Upon clicking the Print button, various functions of the window.print method will be displayed. After you have finalized all configurations in the Print dialog box, press the Save button to store the file or webpage on your device.
Code Explanation: In the program presented above, we have developed a registration form for students, which includes two buttons: Reset and Print. The purpose of the Reset button is to clear all input fields, while the Print button serves to print the content currently displayed. When the Print button is clicked, an onclick event triggers, which in turn calls the PrintFun function. Subsequently, the PrintFun function executes, utilizing the window.print method to initiate printing of the content shown on the window screen.
Conclusion:
We have discussed the print function in JavaScript, which outputs the content displayed on the window screen. This content can include text, images, advertisements, and more. Additionally, invoking the print function in JavaScript triggers the print dialog box. This allows the user or developer to choose the desired options for printing the content currently shown on the window screen.