在 JavaScript 中列印 div 元素的內容

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 window 列印命令列印 div 元素的內容
  2. 在 JavaScript 中使用 outerHTML 屬性列印 div 元素的內容
在 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();
}

輸出:

在 javascript 中列印 div 元素的內容 - 視窗命令輸出

在此輸出中,單擊按鈕時會呼叫函式 printDivContent()

在這個函式中,我們儲存了一個 id 值為 printContent 的 HTML 元素的 innerHTML(內容)。在我們的例子中,它是一個 <div> 元素。

根據引數值和瀏覽器設定,window.open() 開啟一個新標籤頁或一個新瀏覽器視窗。它需要三個引數:URL、視窗名稱和視窗特徵列表(高度、寬度等)。

我們的示例程式碼將前兩個引數留空,並給出一個逗號分隔的列表,其中包含 height=400width=400write() 函式直接寫入開啟的 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;
}

輸出:

在 javascript 中列印 div 元素的內容-outerHTML 輸出

點選按鈕時呼叫函式 printDivContent()。此函式獲取第一個 id 為 printContent 的元素,它是一個 <div> 元素。

此外,我們將 id 為 demo 的元素的 innerHTML(內容)替換為 printDivContents.outerHTML。這裡,outerHTML 屬性輸出或設定特定的 HTML 元素及其內容,包括開始和結束標記及其屬性。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Element