window.print page Print

2019 Unicorn Enterprises heavily recruiting engineers Python standard >>>

Definition and Usage

print () method is used to print the contents of the current window.

grammar

window.print();

window.print () In fact, the browser is a program that prints a menu function calls. Like Click Print menu, can not be accurately paging, you can not set the paper size Printing problems more out of the question, but lets the user do not have to point the menu, click on a button in a Web page, or a link which calls nothing. In fact, many users are using to print in this way, but the most fatal shortcoming in this way is not to set printing parameters, such as paper size, margins, select your printer, and so on.

Method One:
It should be noted that this method provides a onbeforeprint event before printing and after printing, onafterprint. Can re-edit before printing when a number of formats, specially sent to be printed, printing process and then come back.

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

Through these two methods, we can achieve some of the printed page. Ie only the above method and Firefox support.

Method Two:

When you call window.print (), you can use css to control what page is displayed

<style>
@media print{
　　.noprint{
   　　display:none
　　}
}
</style>

HTML as follows:

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

Note: media browser compatibility issues. http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html

Method three:

Dot print button to pop up a new window to display the contents need to print a new window, call window.print in a new window () method, and then automatically close the new window. If the page layout to be printed and original web pages vary widely, using this method.

<!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>

In sum or third most tricky

Reproduced in: https: //my.oschina.net/u/3639899/blog/1833271