您的位置：首页 > 其它

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

2014-01-13 15:13 357 查看
因项目里要做页面打印预览以及打印功能，还要求兼容大部分主流浏览器

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

 

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  页面打印 打印预览 web页面打印 兼容所有浏览器 ie打印预览
相关文章推荐
新的分享
章节导航