在 JavaScript 中列印 div 元素的內容
本教程啟發了兩種不同的方法，用於在 JavaScript 中列印 div 元素的內容。為此，我們可以使用 JavaScript window 列印命令來列印當前視窗的內容。
列印對話方塊由 print() 方法開啟，允許使用者選擇所需的列印選項。
例如，我們可以在那裡使用不同的目的地，儲存為 .pdf 檔案、傳真、Windows 10 的 OneNote 等等。另一方面，element.outerHTML 屬性在網頁上列印 div 元素的內容。
在 JavaScript 中使用 window 列印命令列印 div 元素的內容
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title>
Print the Content of A Div Element in JavaScript
</title>
</head>
<body>
<div id="printContent">
<h2>This is the Heading Inside the div</h2>
<p>
This is a paragraph inside the div and will be printed
on the a separate pdf file as soon as you click the button.
</p>
</div>
<input type="button" value="Click Here" onclick="printDivContent()">
</body>
</html>
JavaScript 程式碼：
function printDivContent() {
var divElementContents = document.getElementById('printContent').innerHTML;
var windows = window.open('', '', 'height=400, width=400');
windows.document.write('<html>');
windows.document.write('<body > <h1>Div\'s Content Are Printed Below<br>');
windows.document.write(divElementContents);
windows.document.write('</body></html>');
windows.document.close();
windows.print();
}
輸出：
在此輸出中，單擊按鈕時會呼叫函式 printDivContent()。
在這個函式中，我們儲存了一個 id 值為 printContent 的 HTML 元素的 innerHTML（內容）。在我們的例子中，它是一個 <div> 元素。
根據引數值和瀏覽器設定，window.open() 開啟一個新標籤頁或一個新瀏覽器視窗。它需要三個引數：URL、視窗名稱和視窗特徵列表（高度、寬度等）。
我們的示例程式碼將前兩個引數留空，並給出一個逗號分隔的列表，其中包含 height=400 和 width=400。write() 函式直接寫入開啟的 HTML 文件流。
我們正在使用 windows.document.write() 在新的瀏覽器視窗中書寫。
close() 函式關閉當前視窗或它被引用或呼叫的特定視窗。print() 方法列印當前視窗的內容；它還會開啟一個列印對話方塊，讓使用者選擇首選的列印選項。
你可以在此處找到有關 window 命令的更多資訊。
在 JavaScript 中使用 outerHTML 屬性列印 div 元素的內容
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title>
Print the Content of A Div Element in JavaScript
</title>
</head>
<body>
<div id="printContent">
<h2>This is the Heading Inside the div</h2>
<p>
This is a paragraph inside the div and will be printed
on the a web page as soon as you click the button.
</p>
</div>
<input type="button" value="Click Here" onclick="printDivContent()">
<p id="demo"></p>
</body>
</html>
JavaScript 程式碼：
function printDivContent() {
var printDivContents = document.getElementById('printContent');
document.getElementById('demo').innerHTML = printDivContents.outerHTML;
}
輸出：
點選按鈕時呼叫函式 printDivContent()。此函式獲取第一個 id 為 printContent 的元素，它是一個 <div> 元素。
此外，我們將 id 為 demo 的元素的 innerHTML（內容）替換為 printDivContents.outerHTML。這裡，outerHTML 屬性輸出或設定特定的 HTML 元素及其內容，包括開始和結束標記及其屬性。
