window.print 页面打印

定义和用法

print() 方法用于打印当前窗口的内容。

语法

window.print();

window.print()  实际上,是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样,不能精确分页,不能设置纸型,套打的问题更加无从谈起,只不过,可以让用户不用去点菜单,直接点击网页中的一个按钮,或一个链接里面调用罢了。事实上,很多用户都是采用这种方式打印,但是这种方式最致命的缺点是不能设置打印参数,比如纸型,页边距,选择打印机等等。

方法一:
需要指出的是这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式,专门送去打印,打印后又处理回来。
function window.onbeforeprint(){
   //将一些不需要打印的隐藏
}
function window.onafterprint(){
   //放开隐藏的元素
}

通过这两个方法,就可以实现页面的部分打印。上述方法只有火狐和ie支持。


方法二:

调用window.print()时,可以利用css来控制页面中的东西是否显示

<style>
@media print{
  .noprint{
     display:none
  }
}
</style>
HTML如下:
<table width="757" height="174" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr class="noprint">
  <td height="133" align="center" valign="top">
   <img src="Images/top.jpg" width="757" height="133"></td>
 </tr>
</table>

注意:media的浏览器兼容问题。http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html


方法三:

点打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。如果要打印的页面排版和原web页面相差很大,采用此种方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>打印测完</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
	#oDiv2 div{width: 100px;height: 100px;border:1px solid #c50000;}
</style>
</head>
<body>
	<div>aaa</div>
	<div id='oDiv2'><div>bbb</div></div>
	<div>ccc</div>
	<input type="button" value="打印" id="js_print" />

	<script>

	var oPrintBtn = document.getElementById("js_print");
	var oDiv2 = document.getElementById("oDiv2");
	oPrintBtn.onclick=function(){
		var oPop = window.open('','oPop');
		var str = '<!DOCTYPE html>'
			str +='<html>'
			str +='<head>'
			str +='<meta charset="utf-8">'
			str +='<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">'
			str+='<style>';
			str+='#oDiv2 div{width: 100px;height: 100px;border:1px solid #c50000;}';
			str+='</style>';
			str +='</head>'
			str +='<body>'
			str +="<div id='oDiv2'><div>bbb</div></div>";
			str +='</body>'
			str +='</html>'

		oPop.document.write(str);
		oPop.print();
		oPop.close();
	}

	</script>
</body>
</html>

综上 还是第三种最靠谱




你可能感兴趣的:(window.print 页面打印)