在 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;
}