如何打印局部页面

最新推荐文章于 2024-03-21 10:27:19 发布

HD_2020176257

最新推荐文章于 2024-03-21 10:27:19 发布

阅读量263

点赞数 1

分类专栏： WEB报表平台快速开发平台局部打印文章标签：开发平台 web

本文链接：https://blog.csdn.net/HD_2020176257/article/details/110422942

版权

快速开发平台同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

WEB报表平台

2 篇文章 0 订阅

订阅专栏

局部打印

1 篇文章 0 订阅

订阅专栏

最近公司开发项目，在使用华丹快速开发平台开发项目过程中，经常会有需要打印页面的情况，常规的打印方案，web报表平台使用第三方控件 Activex 控件，打印很完美，能够完美的支持各种纸张，除此之外，web快速开发平台还可以支持外部javascript代码进行局部打印，下面说一下开发过程中用到的两种局部打印方式，下面代码是测试使用代码：
下面代码是html页面代码

<!DOCTYPE html>
<html>
	<head>
		<title>
			window.print()打印demo
		</title>
	</head>
	<body>
		<p>
			这里的内容不要打印</br>
			是不是很好奇。</br>
			怎么不打印呢</br>
		</p>
		
		<!--startPrint-->
		<div id="printHtml">
			<p>
				这里的内容进行打印1
			</p>
			<p>
				这里的内容进行打印2
			</p>
			<p>
				这里的内容进行打印3
			</p>
			<p>
				这里的内容进行打印3
			</p>
		</div>
		<!--endPrint-->
		
		<p>
			这里的内容还是不要打印</br>
		</p>
		<p>
			代码结束！</br>
		</p>
		<iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>
	</body>
</html>

1、使用window.print()

<script type="text/javascript"> 
		function printPage() { 
			//首先获取整个body的内容，用于拆分和还原
			var bodyHtml=window.document.body.innerHTML; 
			//获取开始和结束标记点
			var  startPrintStr="<!--startPrint-->"; 
			var endPrintStr="<!--endPrint-->"; 
			
			//获取打印内容，第一句是去掉开始标记点前面的内容，为什么+17呢，因为这个内容包含了<!--startPrint--> 这个是17个字符所以，要加17
			var printhtml=bodyHtml.substr(bodyHtml.indexOf(startPrintStr)+17); 
			printhtml=printhtml.substring(0,printhtml.indexOf(endPrintStr)); 
			
			//获取打印内容这里也可以使用固有ID或者name属性进行获取，如直接var printhtmlObj = document.getElementById("printHtml"); var printhtml = printhtmlObj.innerHTML;
			
			//将要打印的内容替换到body
			window.document.body.innerHTML=printhtml; 
			
			//延时打印，防止页面没有完全替换就弹出打印导致部分内容不能打印
			setTimeout("window.print();",3000);
			
			//打印完成后将body原内容替换回去，结束。
			window.document.body.innerHTML=bodyHtml; 
		} 
	</script>

2、基于iframe进行打印

<script type="text/javascript"> 
		function printPage2() { 
			//首先获取整个body的内容，用于拆分和还原
			var bodyHtml=window.document.body.innerHTML; 
			//获取开始和结束标记点
			var  startPrintStr="<!--startPrint-->"; 
			var endPrintStr="<!--endPrint-->"; 
			
			//获取打印内容，第一句是去掉开始标记点前面的内容，为什么+17呢，因为这个内容包含了<!--startPrint--> 这个是17个字符所以，要加17
			var printhtml=bodyHtml.substr(bodyHtml.indexOf(startPrintStr)+17); 
			printhtml=printhtml.substring(0,printhtml.indexOf(endPrintStr)); 
			
			//获取打印内容这里也可以使用固有ID或者name属性进行获取，如直接var printhtmlObj = document.getElementById("printHtml"); var printhtml = printhtmlObj.innerHTML;
			
			//获取到iframe的对象
			var f= document.getElementById("printf"); 
			
			//将打印内容放到iframe中
			f.contentDocument.write(printhtml);
			
			//关闭写入
			f.contentDocument.close();
			
			//延时打印，防止页面没有写完就弹出打印导致部分内容不能打印
			setTimeout("var f = document.getElementById('printf'); f.contentWindow.print();",3000);
		} 
	</script>

HD_2020176257

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
如何打印局部页面

在华丹快速开发平台开发项目过程中，经常会有需要打印页面的情况，常规的打印方案，web报表平台使用第三方插件或者控件 Activex 控件，虽然打印很完美，能够完美的支持各种纸张，但是却只能打印整个报表，不能进行局部打印，所以需要进行局部打印，下面说一下开发过程中用到的两种局部打印方式，下面代码是测试使用代码：下面代码是html页面代码<!DOCTYPE html><html> <head> <title> window.print()打印d
复制链接

扫一扫

专栏目录