JavaScript print()方法

在本节中，我们将讨论JavaScript语言中的print()方法。print()方法用于将当前可见内容（如网页、文本、图片等）打印到计算机屏幕上。当我们在JavaScript中使用print()方法并执行代码时，它会打开一个打印对话框，允许用户或程序员选择适当的选项来打印当前窗口的内容。

语法

以下语法用于打印窗口的当前内容：

window.print()

在上面的语法中，我们使用window.print()方法打印窗口屏幕上当前可见的内容。

参数：它不包含任何参数。

返回值 ：window.print()方法不返回任何内容。

支持print()方法的浏览器

以下是支持window.print()方法的浏览器：

谷歌浏览器
Internet Explorer
火狐浏览器
Opera浏览器
Safari浏览器

示例1：使用print()方法打印网页的程序

在这个程序中，我们使用window.print()方法打印窗口屏幕上当前可见的内容。

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>

当我们在任何浏览器上执行上述编程代码时，它会显示下面的图像。

JavaScript print()方法

示例2：使用print()方法打印学生注册表单的程序

在这个程序中，我们创建了一个学生注册表单，然后使用window.print()方法打印了它。

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>

当我们在任何浏览器上执行上述编程代码时，它会显示以下图像：

JavaScript print()方法

现在我们填写学生注册表的所有细节，然后点击“打印”按钮，将显示以下图像。

JavaScript print()方法

点击打印按钮后，将显示 window.print 方法的不同操作。完成打印对话框中的所有设置后，点击保存按钮将文件或页面保存到您的系统中。

代码解释： 在上面的程序中，我们创建了一个学生注册表单，该表单有两个按钮：重置和打印按钮。重置按钮用于重置内容，打印按钮用于打印显示的内容。当我们点击打印按钮时，将激活onclick函数并调用PrintFun()函数。现在执行PrintFun()函数，其中包含window.print()方法，用于打印窗口屏幕上的显示内容。