window.print 页面打印

时间 2019-11-07

标签 window.print window print 页面打印栏目 Windows 繁體版

原文原文链接

定义和用法

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

语法

window.print();css

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

方法一：
须要指出的是这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。能够在打印前的时候从新编辑一些格式，专门送去打印，打印后又处理回来。java

function window.onbeforeprint(){
   //将一些不须要打印的隐藏
}
function window.onafterprint(){
   //放开隐藏的元素
}

经过这两个方法，就能够实现页面的部分打印。上述方法只有火狐和ie支持。css3

方法二：web

调用window.print()时，能够利用css来控制页面中的东西是否显示chrome

<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.htmlui

方法三：spa

点打印按钮弹出新窗口，把须要打印的内容显示到新窗口中，在新窗口中调用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>

综上仍是第三种最靠谱