JavaScript - 頁面打印

你好，有抱負的程序员們！今天，我們將要進入使用JavaScript進行頁面打印的迷人世界。作為你們友善的鄰居計算機老師，我很興奮能指導你們走過這段旅程。如果你以前從未寫過一行代碼，別擔心——我們將從最基礎的知識開始，逐步學習。那麼，來一杯咖啡（或是你喜歡的飲料），我們開始吧！

JavaScript - Page Printing

如何打印一個頁面？

了解基本知識

在我們跳進打印頁面的世界之前，讓我們花一分鐘時間來了解JavaScript是什麼以及它與網頁有什麼關係。JavaScript是一種編程語言，讓我們能夠使網頁具有交互性。這就像是在給你的網頁提供行為指導。

當提到打印時，JavaScript賦予我們控制網頁如何打印的能力。這就像有一根魔杖，能夠將你的數字內容轉化為實體形式。酷炫吧？

使用 Window.print() 方法

在JavaScript中打印頁面最簡單的方法是使用 window.print() 方法。這個方法會告訴瀏覽器打開打印對話框，就像你在瀏覽器菜單中點擊“打印”選項一樣。

讓我們看一個基本示例：

<button onclick="window.print()">打印這個頁面</button>

在這個示例中，我們創建了一個按鈕，當點擊時，將會觸發打印對話框。這就是這麼簡單！讓我為你詳細解釋：

<button>：這在網頁上創建了一個可點擊的按鈕。
onclick：這是一個當按鈕被點擊時發生的事件。
window.print()：這是JavaScript方法，用於打開打印對話框。

當用戶點擊這個按鈕時，就像他們在說：“嘿，瀏覽器，我想打印這個頁面！”然後瀏覽器就會順從地打開打印對話框。

自定義你的打印輸出

現在，你可能會想：“這很好，但如果我只想打印頁面的一部分怎麼辦？”我的熱情學生們，這就是事情變得真正有趣的地方！

我們可以使用CSS來控制打印內容及其樣式。讓我們看一個示例：

<style>
@media print {
.no-print {
display: none;
}
.print-only {
display: block;
}
}
</style>

<div class="no-print">這不會被打印</div>
<div class="print-only">這只在打印時出現</div>
<button onclick="window.print()">打印這個頁面</button>

在這個示例中，我們使用了一個CSS @media print 規則。這個規則只在頁面被打印時應用。讓我們分解一下：

.no-print { display: none; }：這會在打印時隱藏任何具有“no-print”類的元素。
.print-only { display: block; }：這會在打印時顯示任何具有“print-only”類的元素。

所以，當你點擊打印按鈕時，只有你想要打印的內容會出現在打印版本中。這就像有一個只有紙上才會出現的秘密信息！

創建打印友好版本

有時候，你可能想要為打印創建一個完全不同的頁面版本。這樣做：

function printFriendly() {
var printContent = document.getElementById('printArea').innerHTML;
var originalContent = document.body.innerHTML;

document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}

讓我們分解一下：

我們定義了一個名為 printFriendly() 的函數。
我們獲取我們想要打印的內容（存儲在具有 id 'printArea' 的元素中）並將其保存到 printContent 中。
我們將頁面的原始內容保存到 originalContent 中。
我們將整個body內容替換為我們的打印友好內容。
我們調用 window.print() 來打開打印對話框。
打印後，我們恢復頁面的原始內容。

這就像給你的網頁快速換上一套衣服拍照，然後拍照後再換回原來的衣服！

處理打印事件

JavaScript 還允許我們偵測用戶開始或結束打印。這對於分析或提供用戶反饋非常有用。這樣做：

window.onbeforeprint = function() {
console.log("即將進行打印！");
};

window.onafterprint = function() {
console.log("打印已完成！");
};

在這個示例中，我們使用了兩個特殊事件：

onbeforeprint：在打印對話框打開之前，此事件會觸發。
onafterprint：在打印對話框關閉後，此事件會觸發。

這些事件就像有一隻小鳥在你耳邊低語，當打印開始和結束時告訴你。你可以使用這些事件來做些事情，比如向用戶顯示“打印中...”的消息，或者為你的網站分析記錄打印嘗試。

打印方法的總結

這裡是一個總結我們討論過的方法的表格：

方法	描述
`window.print()`	打開打印對話框
`@media print` CSS 規則	自定義打印外觀
自定義打印函數	創建打印友好版本
`window.onbeforeprint`	偵測打印開始
`window.onafterprint`	偵測打印結束

記住，使用JavaScript打印是為了增強用戶體驗。這就像作為一個好主人——你希望確保你的客人（或者說，你的用戶）有他們需要的所有東西，並且知道 exactly 要怎麼做。

當我們結束這個課程時，我想要你記住，編程都是關於練習的。不要害怕嘗試這些方法，混合和匹配它們，看看哪個對你的特定需求最有效。也許你甚至會發現一個我沒有想過的新技巧！

在我多年的教學經驗中，我看到了學生從完全的初學者變成了創建令人驚艷的交互式網站的專家。而這一切從這些簡單的概念開始。所以，持續練習，持續探索，最重要的是，享受其中的樂趣！

現在，你為什麼不試著在你自己的網頁上添加一個打印按鈕？相信我，這是一個讓你的朋友和家人印象深刻的絕佳方式——他們會認為你是一個計算機巫師！大家快樂編程！

Credits: Image by storyset