Javascript – 頁面打印
在Web開發中，我們經常需要實現頁面的打印功能，以便用戶可以將頁面內容保存到紙質文檔中。愛掏網 - it200.com在經過長時間的發展，現在大多數瀏覽器都提供了打印的API，使得前端開發者們可以方便地實現頁面的打印功能。愛掏網 - it200.com
在Javascript中，我們可以通過調用window.print()方法來實現頁面的打印。愛掏網 - it200.com該方法沒有任何參數，調用方法非常簡單，可以直接在頁面的某個按鈕上綁定點擊事件。愛掏網 - it200.com
<button onclick="window.print()">打印</button>
通過上面的代碼，我們可以在頁面上創建一個按鈕，用戶點擊后會彈出打印對話框，簡單便捷。愛掏網 - it200.com
打印樣式
但是，如果直接使用上面的代碼，打印出來的頁面可能會非常難看，因為樣式等視覺效果并沒有得到保留。愛掏網 - it200.com因此，我們需要通過樣式表的方式來設置打印時的樣式。愛掏網 - it200.com
我們可以通過創建一個專門的打印樣式表來實現。愛掏網 - it200.com我們可以在HTML頭部中通過<link>元素來指定打印樣式表：
<link rel="stylesheet" media="print">
通過media屬性指定樣式表僅在打印時生效，不影響瀏覽器的顯示效果。愛掏網 - it200.com
針對使用了Bootstrap等框架的頁面，打印時需要進行一些額外的樣式設置。愛掏網 - it200.com例如，需要將頁面中的col-*等布局和柵格類忽略掉，以免在打印時影響視線。愛掏網 - it200.com我們可以在打印樣式表中添加以下樣式。愛掏網 - it200.com
@media print {
.container, .container-fluid {
width: auto !important;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: none !important;
margin: 0 !important;
padding: 0 !important;
display: inline-block !important;
}
}
上面的代碼中，我們將.container和.container-fluid類的寬度設為了auto，同時將所有柵格類的位置按照左對齊的方式重新排列。愛掏網 - it200.com這樣，在進行打印操作時，頁面就可以自動進行排版，同時保證當前頁面中使用的樣式仍然能夠保留下來。愛掏網 - it200.com
打印事件
有時候，我們需要在用戶進行打印操作時執行一些特定的操作，比如發送后臺請求、保存打印日志等。愛掏網 - it200.com此時，我們需要在打印事件中添加相應的代碼。愛掏網 - it200.com
瀏覽器提供了兩個打印事件：onbeforeprint和onafterprint。愛掏網 - it200.com當用戶點擊打印按鈕后，瀏覽器會首先觸發onbeforeprint事件，其次才會彈出打印窗口。愛掏網 - it200.com最終，當用戶關閉打印窗口后，瀏覽器會觸發onafterprint事件。愛掏網 - it200.com
我們可以通過使用window.matchMedia方法來監聽這兩個事件。愛掏網 - it200.com
window.onbeforeprint = function () {
// 在打印前執行的操作
};
window.onafterprint = function () {
// 在打印后執行的操作
};
示例代碼
下面是一個包含打印樣式和打印事件的示例代碼。愛掏網 - it200.com
<!DOCTYPE html>
<html>
<head>
<title>打印示例</title>
<link rel="stylesheet" media="print">
</head>
<body>
<h1>打印示例</h1>
<p>這是一段測試數據。愛掏網 - it200.com</p>
<button id="print-btn">打印</button>
<!-- 在頁面底部添加一個隱藏的提示框 -->
<div id="print-tip" style="display: none;">正在打印，請稍候...</div>
<script>
// 監聽打印事件
window.onbeforeprint = function() {
// 在打印前顯示提示框
document.getElementById("print-tip").style.display = "block";
// 發送日志請求
sendLog();
};
window.onafterprint = function() {
// 在打印后隱藏提示框
document.getElementById("print-tip").style.display = "none";
};
// 綁定打印按鈕的點擊事件
var printBtn = document.getElementById("print-btn");
printBtn.onclick = function() {
// 顯示提示框
document.getElementById("print-tip").style.display = "block";
// 延時1秒后執行打印操作
setTimeout(function() {
window.print();
}, 1000);
};
// 發送日志請求
function sendLog() {
// 將請求代碼省略
console.log("正在發送日志請求...");
}
</script>
</body>
</html>
結論
通過本文的介紹，我們了解了如何使用Javascript實現頁面的打印功能，以及如何設置打印樣式和添加打印事件。愛掏網 - it200.com在實際項目中，我們可以根據具體需求進行相應的修改和擴展，讓打印功能更加符合實際需求。愛掏網 - it200.com