数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 jQuery 打印页面？
允许用户打印网页在许多情况下都是一个很好的功能。例如，用户可以打印发票，如果他们在包含博客的网页上，则可以打印整篇文章，还可以打印一些重要数据等。
JQuery 包含 print() 方法，允许我们通过将其添加到 pdf 格式中来打印网页的 HTML 内容。它会打开打印弹出窗口，当用户点击打印按钮时，如果打印机已连接，它会开始打印页面。否则，它会将数据以 pdf 文件格式保存在本地计算机中。
语法
用户可以按照以下语法使用带 window 对象的 print() 方法，使用 JQuery 打印网页。
window.print();
示例 1
在下面的示例中，我们向网页添加了一些内容。此外，我们还添加了打印按钮。当用户点击按钮时，它会调用 printPage() 函数。printPage() 函数调用 window 对象的 print() 方法。
在输出中，用户可以观察到，当他们点击按钮时，它会打开打印弹出窗口，当他们在打印弹出窗口中点击打印按钮时，它会将网页内容以 pdf 文件格式保存。
<html>
<head>
<style>
.test {
color: red;
font-size: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js">
</script>
</head>
<body>
<h2> <i> Printing the current page </i> using jQuery </h2>
<div class="test"> Hello World! </div>
<h3> Welcome to the TutorialsPoint! </h3>
<button onclick="printPage()"> Print current page </button>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
示例 2（使用 jQuery 打印特定 div 元素）
在下面的示例中，我们演示了如何使用 JQuery 打印特定网页的内容。我们在这里添加了包含“print”类名的 div 元素。此外，我们还添加了在点击按钮时执行 printDiv() 函数的按钮。
在 printDiv() 函数中，首先，我们通过标签名称访问 div 元素。之后，我们打开一个新的浏览器窗口并将 div 元素的内容添加到新窗口中。接下来，我们关闭另一个窗口的文档，然后我们关闭另一个窗口。
在输出中，当我们点击按钮时，它会打开打印弹出页面。
<html>
<head>
<style>
.print {color: red; font-size: 30px; border: 2px solid green; width: 400px; height: 200px; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js">
</script>
</head>
<body>
<h2> <i> Printing the current div element </i> using jquery </h2>
<div class="print"> We will print this div element. Click the print button to see it in action. </div> <br> <br>
<button onclick="printDiv()"> Print current page </button>
<script>
function printDiv() {
var divToPrint = document.getElementsByClassName('print')[0];
var anotherWindow = window.open('', 'Print-Window');
anotherWindow.document.open();
anotherWindow.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
anotherWindow.document.close();
setTimeout(function() {
anotherWindow.close();
}, 10);
}
</script>
</body>
</html>
示例 3（在表单提交时打印页面）
在下面的示例中，我们演示了如何在表单提交时打印页面。您可能已经看到，在许多平台上，您可以在成功付款后下载付款发票单。
在这里，我们创建了包含不同输入字段的表单。在 JQuery 中，我们访问输入字段的值并在网页上显示它们。之后，我们执行 window.print() 方法以打印包含表单数据的网页。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
</head>
<body>
<h2> <i> Printing the current page after submitting the form </i> using jQuery </h2>
<form id = "form" method = "post">
<input type = "text" name = "name" placeholder = "Enter your name" />
<br> <br>
<input type = "text" name = "email" placeholder = "Enter your email" />
<br> <br>
<input type = "button" name = "submit" value = "Submit" />
</form> <br> <br>
<div id = "output"> </div>
<script>
$(document).ready(function () {
$('input[type="button"]').click(function () {
var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val();
var data = 'Name: ' + name + '<br>' + 'Email: ' + email;
$('#output').html(data);
window.print(); // print the current page
});
});
</script>
</body>
</html>
在本教程中，我们学习了如何使用 JQuery 打印网页。在不同的场景中，我们需要打印网页以将其数据本地下载。开发人员始终可以使用 window.print() 方法来打印网页。
4K+ 浏览量
