在 HTML 中列印頁面
本文將介紹幾種從 HTML 頁面列印特定內容的方法。
在 HTML 中在@media print 中隱藏帶有 display:none 的內容以列印特定內容
當網頁列印在紙上時，我們可以使用 CSS 來改變網頁的外觀。我們可以在 Web 上設定一種 CSS 樣式，在列印 Web 內容時設定另一種 CSS 樣式。
CSS @media print 規則允許你在列印 HTML 內容時更改其樣式。
我們需要 JavaScript 來列印 HTML 內容。window.print() 方法允許你列印當前視窗。
print() 方法開啟 Print 對話方塊，讓你選擇首選的列印選項。單擊按鈕後，我們可以呼叫 window.print() 來列印當前視窗。
使用 @media print，我們可以將不想列印的 HTML 內容的 display 屬性設定為 none。儘管 Web 上有這些內容，但這不會在列印選項中顯示 HTML 內容。
例如，在 HTML 中，使用 h1 標籤建立兩個標題。將第一個標題命名為 Need to print this，將第二個標題命名為 Don't need to print this。
將第二個標題的類名命名為 dontPrint。然後建立一個按鈕並將其命名為列印。
另外，給這個按鈕一個類名 dontPrint。為按鈕建立一個 onClick 偵聽器，並在單擊按鈕時呼叫 window.print() 方法。
在 CSS 部分，在 @media print 內，將名為 dontPrint 的類的顯示屬性設定為 none。
下面的示例顯示，當單擊列印按鈕時，具有類名稱 dontPrint 的標題和按鈕不會顯示在列印部分。
示例程式碼：
<h1>
Need to print this
</h1>
<h1 class="dontPrint">
Don't need to print this
</h1>
<button onclick="window.print();" class="dontPrint">
Print
</button>
@media print {
.dontPrint{
display:none;
}
}
將 id 傳遞給 onClick 事件偵聽器以列印 HTML 中的特定內容
在這種方法中，我們可以建立要列印的特定內容的 id。然後，我們可以藉助 onClick 事件偵聽器將 id 傳遞給 JavaScript 函式。
JavaScript 使用 window.print() 方法列印指定的內容。
innerHTML 屬性設定或返回元素的 HTML 內容。我們可以使用它與 document.getElementById() 方法一起選擇用 JavaScript 列印的內容。
同樣，我們可以使用 innerHTML 屬性和 document.body 屬性來保留 HTML 文件的原始內容。列印完內容後，我們可以在 document.body.innerHTML 屬性中設定 HTML 文件的原始內容。
讓我們看看下面的說明以更清楚地理解它。
例如，建立一個 div 並給它一個 id printIt。在那個 div 中，建立一個 h1 標籤並在裡面寫下 Need to print this。
在 div 之外，建立一個 button 並將其命名為 Print。為按鈕建立一個 onclick 偵聽器，並以 printIt id 作為引數呼叫 printOut 函式。
在 JavaScript 部分中，使用引數 divId 建立一個名為 printOut 的函式。建立一個名為 printOutContent 的變數來儲存 divId 的 innerHTML。
接下來，建立另一個變數 originalContent 來儲存 HTML 正文的 innerHTMl。演示如下所示。
var printOutContent = document.getElementById(divId).innerHTML;
var originalContent = document.body.innerHTML;
接下來，將正文的 innerHTML 設定為 printOutContent 變數。
然後，呼叫 window.print() 方法。呼叫該方法後，將主體的 innerHTML 設定為 originalContent 變數。
document.body.innerHTML = printOutContent;
window.print();
document.body.innerHTML = originalContent;
在這裡，當我們呼叫 window.print() 方法時，它只會列印 divId id 的部分，因為 document.body.innerHTML 僅包含要列印的元素。列印內容後，整個 HTML 文件的內容將設定為其原始狀態。
因此，我們使用 JavaScript 列印出 HTML 文件的特定內容。
示例程式碼：
<div id="printIt">
<h1>
Need to Print this
</h1>
</div>
<button onClick="printOut('printIt')">
Print
</button>
function printOut(divId) {
var printOutContent = document.getElementById(divId).innerHTML;
var originalContent = document.body.innerHTML;
document.body.innerHTML = printOutContent;
window.print();
document.body.innerHTML = originalContent;
}