WEB页面打印预览、打印兼容所有浏览器-优快云博客

本文介绍了一种在网页中实现打印预览及打印功能的方法，并确保了在各种主流浏览器中的兼容性，特别是针对IE浏览器的特殊处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现方式有很多最后决定用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>