JavaScript中如何实现局部打印？

15 min read

在JS中，可以使用Window.print()方法实现打印，但是如果需要打印指定的区域，则需要额外的处理。下面是实现局部打印的具体步骤:

  1. 创建需要打印的区域的HTML结构，例如一个div容器，并设置其样式。

  2. 使用Javascript获取需要打印的区域的内容，可以使用Document.getElementById()或者Document.getElementsByClassName()等方法。

  3. 将获取到的内容插入到打印区域的div容器中。

  4. 调用Window.print()方法，弹出打印选项卡。

  5. 在打印选项卡中进行设置，例如选择打印区域、纸张方向和大小等。

下面是一个例子：

<!DOCTYPE html>
<html>
<head>
	<title>局部打印</title>
</head>
<body>
	<div id="printArea">
		<h1>需要打印的区域</h1>
		<p>这是打印的内容</p>
	</div>
	<button onclick="printArea()">打印</button>

	<script>
		function printArea() {
			var printContent = document.getElementById("printArea").innerHTML;
			var originalContent = document.body.innerHTML;
			document.body.innerHTML = printContent;
			window.print();
			document.body.innerHTML = originalContent;
		}
	</script>
</body>
</html>

在这个例子中，我们创建了一个div容器作为打印区域，然后使用Javascript将其内容获取到，并插入到body中，这样当我们调用Window.print()方法时，就只会打印出div容器中的内容。在打印结束后，我们将body的内容恢复到原始状态。