WEB页面打印预览、打印 兼容所有浏览器

因项目里要做页面打印预览以及打印功能,还要求兼容大部分主流浏览器

实现方式有很多最后决定用window.print();大部分浏览器都适用,

window.print()方式ie浏览器不支持打印预览,针对ie浏览器的预览用ie自有打印组件

WebBrowser.ExecWB实现

ie浏览器预览时要把不需要预览的div加上class="noprint",否则会整个页面全部预览

打印时则只打印调用printit方法时传入的div层

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>    
	@media print {  
		.noprint {   
			display: none   
		}  
	}  
  </style>  
  <script language="javascript">
	   //提示窗口
	   function printit(MyDiv,type){
			if(type=='Preview'&&!-[1,]){   
				document.all.WebBrowser.ExecWB(7,1);
			}else{                                   
	         var newstr = document.getElementById(MyDiv).innerHTML;
	         var oldstr = document.body.innerHTML;
	         document.body.innerHTML = newstr;
	         window.print();
	         document.body.innerHTML = oldstr;
				return false;
			}
	   }
  </script>
 </HEAD>
 
 <BODY>
  
	<span id='div1'>把要打印的内容放这里</span></br> </br> 
	 
	<span class="noprint" >不打印的内容放这里</span>  </br>  </br> 
	 
	<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="WebBrowser" width="0" VIEWASTEXT></OBJECT>

	<input type="button" value="预览" onclick="javascript:printit('div1','Preview');">
	<input type="button" id="button_print" name="button_print" value="打印本单据" onclick="javascript:printit('div1','print');">
 </BODY>
</HTML>

 

 

你可能感兴趣的:(兼容所有浏览器,页面打印,ie打印预览,打印预览,web页面打印)