JavaScript – 頁面打印
打印是網(wǎng)頁瀏覽器提供的極其實用的功能之一，有時候我們需要在網(wǎng)頁中提供一個打印按鈕，讓用戶打印當(dāng)前頁面或是頁面某一部分的內(nèi)容。愛掏網(wǎng) - it200.comJavaScript為我們提供了函數(shù)window.print()，它和標(biāo)準(zhǔn)的打印功能沒有什么區(qū)別，用戶可以通過選擇打印機、設(shè)置打印格式等功能來進行打印。愛掏網(wǎng) - it200.com
print()函數(shù)的使用
基本使用
print()函數(shù)是window對象的一個方法，調(diào)用它就可以開始打印操作。愛掏網(wǎng) - it200.com使用print()函數(shù)的默認(rèn)的打印行為是打印當(dāng)前頁面，但也可以通過將自定義的CSS樣式表賦值給 ＠m(xù)edia print媒體查詢中來指定打印內(nèi)容。愛掏網(wǎng) - it200.com
示例代碼：
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Click here to Print This Page</button>
</body>
</html>
上面的代碼中，當(dāng)用戶點擊“Click here to Print This Page”按鈕時，將觸發(fā)瀏覽器頁面打印功能。愛掏網(wǎng) - it200.com
自定義樣式
除了默認(rèn)的打印行為外，我們可以通過自定義打印CSS樣式來實現(xiàn)定制化的打印功能。愛掏網(wǎng) - it200.com在媒體查詢@media print中，我們可以使用CSS定義打印中的樣式，例如：
@media print {
body {
font-size: 12pt;
}
h1 {
font-size: 18pt;
}
}
在上面的例子中，我們通過樣式定義了打印時全局字體大小以及H1標(biāo)簽的字體大小。愛掏網(wǎng) - it200.com
除樣式之外，我們還可以使用JavaScript動態(tài)地向打印頁面添加內(nèi)容，或是在打印結(jié)束后執(zhí)行一些額外的操作。愛掏網(wǎng) - 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創(chuàng)建了一個新窗口，并向該窗口寫入了自定義的HTML內(nèi)容和樣式表，然后通過window.print()直接打印該新的HTML頁面。愛掏網(wǎng) - it200.com最后，我們關(guān)閉了打印窗口。愛掏網(wǎng) - it200.com
自定義打印操作
在打印結(jié)束后，我們可以執(zhí)行一些自定義操作。愛掏網(wǎng) - it200.com通常這些自定義操作用于重置頁面狀態(tài)，例如將表單數(shù)據(jù)重置為初始狀態(tài)、隱藏某些元素、或是進行一些預(yù)處理等。愛掏網(wǎng) - 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>
在上面的例子中，我們首先獲取了并禁用了頁面中的第一個表單，然后為打印樣式創(chuàng)建了一個自定義的CSS樣式表，并將其添加到了HTML的內(nèi)容區(qū)域中。愛掏網(wǎng) - it200.com最后，我們打印了內(nèi)容區(qū)域，并在打印完成后恢復(fù)表單的可用狀態(tài)。愛掏網(wǎng) - it200.com
結(jié)論
通過JS的window.print()函數(shù)，我們可以非常便捷地實現(xiàn)網(wǎng)頁打印的功能。愛掏網(wǎng) - it200.com而自定義的CSS樣式表和打印操作也能讓我們實現(xiàn)更加靈活和實用的打印功能。愛掏網(wǎng) - it200.com