js 打印，预览页面的部分元素

最新推荐文章于 2024-07-11 08:47:19 发布

原创最新推荐文章于 2024-07-11 08:47:19 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript和HTML结合的方式实现网页内容的打印及打印预览功能的方法。通过定义特定的注释标签来标记需要打印的内容范围，并利用JavaScript动态修改DOM结构，实现了对页面中不需要打印部分的隐藏。

<a href="javascript:void(0);" id="append">append</a>
	<input id="btnPrint" type="button" value="打印"
		onclick="javascript:window.print();" />

	<input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />
	<style type="text/css" media=print>
.noprint {
	display: none
}
</style>


	<p class="noprint">不需要打印的地方</p>

<script>
		function preview(oper) {
			if (oper < 10) {
				bdhtml = window.document.body.innerHTML;//获取当前页的html代码    
				sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域    
				eprnstr = "<!--endprint" + oper + "-->";//设置打印结束区域    
				prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html    

				prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html    
				window.document.body.innerHTML = prnhtml;
				window.print();
				window.document.body.innerHTML = bdhtml;
			} else {
				window.print();
			}
		}
	</script>

<p>XXXXX</p>
	<!--startprint1-->
	要打印的内容<br>
	要打印的内容<br>
	要打印的内容<br>
	要打印的内容<br>
	要打印的内容<br>
	要打印的内容<br>
	要打印的内容<br>
	要打印的内容<br>
	要打印的内容<br>
	<!--endprint1-->