資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
