JavaScript – 頁面打印
打印是網頁瀏覽器提供的極其實用的功能之一，有時候我們需要在網頁中提供一個打印按鈕，讓用戶打印當前頁面或是頁面某一部分的內容。愛掏網 - it200.comJavaScript為我們提供了函數window.print()，它和標準的打印功能沒有什么區別，用戶可以通過選擇打印機、設置打印格式等功能來進行打印。愛掏網 - it200.com
print()函數的使用
基本使用
print()函數是window對象的一個方法，調用它就可以開始打印操作。愛掏網 - it200.com使用print()函數的默認的打印行為是打印當前頁面，但也可以通過將自定義的CSS樣式表賦值給 ＠media print媒體查詢中來指定打印內容。愛掏網 - it200.com
示例代碼：
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Click here to Print This Page</button>
</body>
</html>
上面的代碼中，當用戶點擊“Click here to Print This Page”按鈕時，將觸發瀏覽器頁面打印功能。愛掏網 - it200.com
自定義樣式
除了默認的打印行為外，我們可以通過自定義打印CSS樣式來實現定制化的打印功能。愛掏網 - it200.com在媒體查詢@media print中，我們可以使用CSS定義打印中的樣式，例如：
@media print {
body {
font-size: 12pt;
}
h1 {
font-size: 18pt;
}
}
在上面的例子中，我們通過樣式定義了打印時全局字體大小以及H1標簽的字體大小。愛掏網 - it200.com
除樣式之外，我們還可以使用JavaScript動態地向打印頁面添加內容，或是在打印結束后執行一些額外的操作。愛掏網 - it200.com下面我們來看一個實例：
<!DOCTYPE html>
<html>
<body>
<h1>My Printable Page</h1>
<p>Click the button below to generate a printable document with some random text:</p>
<button onclick="printPage()">Print This Page</button>
<script>
function printPage() {
// Create a new window object
var w = window.open();
// Write a new document into the new window
w.document.write('<html><head><title>Printable Document</title>');
// Add some stylesheet rules for printing
w.document.write('<style>@media print {h1 {font-size: 24pt;}p {font-size: 12pt;}}</style>');
w.document.write('</head><body>');
// Add some random content
w.document.write('<h1>My Random Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus tellus vel tincidunt placerat. Fusce eu lorem at justo laoreet eleifend at in ligula. Maecenas sit amet dictum erat, quis pretium arcu. Donec semper turpis in libero maximus, a aliquam est tincidunt. Praesent tincidunt mattis porta.</p>');
w.document.write('</body></html>');
// Print the new document
w.print();
// Close the new window
w.close();
}
</script>
</body>
</html>
在上面的代碼中，我們通過JavaScript創建了一個新窗口，并向該窗口寫入了自定義的HTML內容和樣式表，然后通過window.print()直接打印該新的HTML頁面。愛掏網 - it200.com最后，我們關閉了打印窗口。愛掏網 - it200.com
自定義打印操作
在打印結束后，我們可以執行一些自定義操作。愛掏網 - it200.com通常這些自定義操作用于重置頁面狀態，例如將表單數據重置為初始狀態、隱藏某些元素、或是進行一些預處理等。愛掏網 - it200.com
<!DOCTYPE html>
<html>
<body>
<button onclick="printPage()">Print This Page</button>
<script>
function printPage() {
// Save a reference to the form
var form = document.forms[0];
// Disable the form
form.disabled = true;
// Ensure the form data is reset before printing
form.reset();
// Add a custom CSS stylesheet for printing
var styleSheet = "<style>@media print {#header, #footer {display:none;}h1 {font-size: 24pt;}p {font-size: 12pt;}}</style>";
// Write the HTML content to the print region
document.getElementById("printregion").innerHTML = styleSheet + document.getElementById("content").innerHTML;
// Print the current page
window.print();
// Re-enable the form
form.disabled = false;
}
</script>
<div id="content">
<div id="header">
<h1>My Printable Document</h1>
</div>
<div id="printregion">
<h2>Printable Content Title</h2>
<p>Some text to be printed goes here.</p>
</div>
<div id="footer">
<p>Page Footer</p>
</div>
</div>
</body>
</html>
在上面的例子中，我們首先獲取了并禁用了頁面中的第一個表單，然后為打印樣式創建了一個自定義的CSS樣式表，并將其添加到了HTML的內容區域中。愛掏網 - it200.com最后，我們打印了內容區域，并在打印完成后恢復表單的可用狀態。愛掏網 - it200.com
結論
通過JS的window.print()函數，我們可以非常便捷地實現網頁打印的功能。愛掏網 - it200.com而自定義的CSS樣式表和打印操作也能讓我們實現更加靈活和實用的打印功能。愛掏網 - it200.com