在 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 元素及其内容，包括开始和结束标记及其属性。
