window.print 页面打印

最新推荐文章于 2024-08-22 16:00:34 发布

hdchangchang

最新推荐文章于 2024-08-22 16:00:34 发布

阅读量5.5w

点赞数 3

本文链接：https://blog.csdn.net/hdchangchang/article/details/46504417

版权

定义和用法

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.οnclick=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>

综上还是第三种最靠谱