天天看点

js调用打印,并且将页面缩放后进行打印,同时可自定义分页打印demo

话不多说,直接上demo,注释备注相当清晰
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缩放打印与分页</title>
<script type="text/javascript"> 
	function printpage1(){    
			
			// body全局打印
			// 页面缩放,此处缩放为50%,不缩放的话页面超出就打印不出来,这个需要自己调试,看自己
			document.getElementsByTagName('body')[0].style.zoom=0.5;
			
			// 调用window的打印功能
			window.print(); 
			
			// 将页面缩放调整到最初状态
			document.getElementsByTagName('body')[0].style.zoom=1;
			return false; 
		}
		
		function printpage2(){    
			// 局部打印
			// 获取局部打印数据
			var newstr = document.getElementById("println_div").innerHTML;
			// 缓存body全部数据
			var oldstr = document.body.innerHTML; 
			// 将局部数据放入body内
			document.body.innerHTML = newstr; 
			
			// 页面缩放,此处缩放为50%,不缩放的话页面超出就打印不出来,这个需要自己调试,看自己
			document.getElementsByTagName('body')[0].style.zoom=0.5;
			
			// 调用window的打印功能
			window.print(); 
			
			// 打印完成将body数据还回去
			document.body.innerHTML = oldstr; 

			// 将页面缩放调整到最初状态
			document.getElementsByTagName('body')[0].style.zoom=1;
			return false; 
		}
</script>
</head>
  
<body>
<p>1</p>
<p>2</p>
<div id="println_div">
	<h1>打印标题</h1>
	<p>打印内容~~</p>
	<!-- style属性这里是在打印的时候,在标签之前的将作为1页,标签之后作为新的页 -->
	<div style="page-break-before:always;"><br /></div>
	<h1>打印标题</h1>
	<p>打印内容~~</p>
	<div  style="page-break-before:always;"><br /></div>
	<h1>打印标题</h1>
	<p>打印内容~~</p>
</div>
<button type="button" onclick="printpage1()">全局打印</button>
<button type="button" onclick="printpage2()">局部打印</button>
<p>1</p>
<p>2</p>
</body>
</html>