标签:oct 窗口 history lin 1.3 sof innerhtml splay ora
今天弄了下打印相关的的内容,主要是为了打印页面内容的时候不想同时打印出“打印按钮”。
主要有五种方法(其中6为删除打印页眉页脚的例子):
1、打印前将style隐藏,打印后再显示出来。该方法较简单,且可以写成一个共有的方法,推荐。
style.display="none";
window.print();//打印
style.display="";
下面的代码写成了一个传入标签中name属性作为参数的方法,可以讲name均为此名称的部分隐藏打印:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>打印部分内容</title> <SCRIPT language=javascript> function printWebPageByHideName(hideName) //打印函数 { if(!document.getElementsByName(hideName)){ alert("打印失败"); return; } var hideNum = document.getElementsByName(hideName).length; //alert(hideNum); for( i = 0;i<hideNum; i++){ document.getElementsByName(hideName)[i].style.display="none";//打印时隐藏 } window.print();//打印 for( i = 0;i<hideNum; i++){ document.getElementsByName(hideName)[i].style.display="";//打印后再显示出来 } } </SCRIPT> </head> <body> <DIV align=center> 你希望打印的内容.......... </DIV> <input type="button" name="btn" value="提交1" onclick="printWebPageByHideName(‘btn‘);"/> <input type="button" name="btn" value="提交2" onclick="printNew();"/> <input type="button" name="btn" value="提交3" onclick="printNew();"/> </body> </html>
2.css:主要是把不想打印出的内容用如下样式:
<style media="print" type="text/css"> .noprint{visibility:hidden} </style>
或者:
<style media="print" type="text/css"> .noprint{DISPLAY: none;} </style>
整个页面如下,还包含一些常用的打印属性功能按钮:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>打印</title> <style media="print" type="text/css"> .noprint{visibility:hidden} </style> <style type="text/css"> <!-- .STYLE1 { font-size: 16px; font-weight: bold; } --> </style> </head> <body> <OBJECT id="WebBrowser" height="0" width="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" VIEWASTEXT> </OBJECT> <center > <p class="STYLE1">要打印的内容 <span class="noprint"> </span></p> <p> </p> <p> </p> <table width="100%" border="0"> <tr> <td><span class="noprint"> <input name="button2" type="button" onclick="document.all.WebBrowser.ExecWB(6,1)" value="打印" /> </span></td> <td><span class="noprint"> <input name="button3" type="button" onclick="document.all.WebBrowser.ExecWB(6,6)" value="直接打印" /> </span></td> <td><span class="noprint"> <input name="button4" type="button" onclick="document.all.WebBrowser.ExecWB(8,1)" value="页面设置" /> </span></td> <td><span class="noprint"> <input name="button5" type="button" onclick="document.all.WebBrowser.ExecWB(7,1)" value="打印预览" /> </span></td> </tr> <tr> <td><span class="noprint"> <input name="button6" type="button" onclick="javascript:window.close()" value="关闭js" /> </span></td> <td><span class="noprint"> <input name="button7" type="button" onclick="document.all.WebBrowser.ExecWB(2,1)" value="关闭 " /> </span></td> <td><span class="noprint"> <input name="button8" type="button" onclick="document.all.WebBrowser.ExecWB(4,1)" value="保存网页 " /> </span></td> <td><span class="noprint"> <input name="button9" type="button" onclick="document.all.WebBrowser.ExecWB(10,1)" value="查看页面属性 " /> </span></td> </tr> <tr> <td><span class="noprint"> <input name="button" type="button" onclick="document.all.WebBrowser.ExecWB(1,1)" value="打开 " /> </span></td> <td><span class="noprint"> <input name="button11" type="button" onclick="document.all.WebBrowser.ExecWB(17,1)" value="全选" /> </span></td> <td><span class="noprint"> <input name="button12" type="button" onclick="document.all.WebBrowser.ExecWB(22,1)" value="刷新 " /> </span></td> <td><span class="noprint"> <input name="button13" type="button" onclick="document.all.WebBrowser.ExecWB(45,1)" value="关闭窗体无提示" /> </span></td> </tr> <tr> <td><span class="noprint"> <input name="button10" type="button" onclick="document.all.WebBrowser.ExecWB(15,1)" value="好像是撤销,有待确认" /> </span></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <p> </p> </center> </body> </html>
3、打印页面中选取的连续部分的js
<script language=javascript> function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; eprnstr="<!--endprint-->"; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); window.document.body.innerHTML=prnhtml; window.print(); } </script> 打印页面中选取的连续部分(打印从“--startprint--”到“--endprint--”)的HTML代码: <!--startprint-->需打印部分: <table id="table1" width="90%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td>1</td> <td>2008-5-20</td> <td>天祺教育</td> <td>购物网站</td> <td>2级</td> <td>老师</td> <td>王老师</td> <td>2008-7-20</td> <td><a href="aqChakanShow.html">查看</a></td> </tr> </table> <!--endprint--> 非打印部分: <table width="90%" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="javascript:;" onClick="doPrint()">打印</a> </td> <td></td> </tr> </table>
4、frame框架,不想贴代码了,代码在附件中
5、div样式,可下载附件中的printDiv.rar文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>打印测试</title> <script language="JavaScript" type="text/JavaScript"> <!-- function PrintPage() { if (window.print) { // ***************************************************** // divPrint即为你在打印的区域 // 这里根据你要打印的哪些内容,从原显示页面中用 // <div id="divPrint">divPrint....</div> // 等标示出来,要打印多少项目就标示多少 // ***************************************************** var divPrint = document.all.divPrint.innerHTML; // ***************************************************** // 定义打印用的CSS,具体你想打印出什么样的格式全看你自己 // 了,但要注意:如果此处有什么同网页中不一致的,可能打印 // 出来的页面同网页格式、字体可能会有所不同 // ***************************************************** var css = ‘<style type="text/css" media=all>‘ + ‘p { line-height: 120%}‘ + ‘.ftitle { line-height: 120%; font-size: 18px; color: #000000}‘ + ‘td { font-size: 10px; color: #000000}‘ + ‘</style>‘ ; // ****************************************************** // 在此处重新设置的打印格式,根据你的打印要求,将原显示的 // 网页的DIV内容重新组合,可以根据你原来的表格内容,去掉 // 不要打印的,你也可以能下面定义的noprint忽略掉你不想打 // 印的东西,只调用你要打印的内容,但这样被忽略掉的地方将 // 打印出空,不是很美观。表格宽度要同打印的纸张宽度匹配。 // ****************************************************** var body =‘<table width="640" border="0" cellspacing="0" cellpadding="5">‘ + ‘ <tr> ‘ + ‘ <td class="fbody"> ‘ + ‘ <div align="center" class="ftitle">‘ + divPrint + ‘</div>‘ + ‘ </td>‘ + ‘ </tr>‘ + ‘</table>‘; // ****************************************************** // 重设document.body,打印文档准备就绪 // ****************************************************** document.body.innerHTML = ‘<center>‘ + css + body + ‘</center>‘; // ****************************************************** // 调用打印命令,打印当前窗口内容。当你打印时其实是一张新 // 的网页了,但网页文件还是原先的。紧接着调用 // window.history.go(0),再回到打印前的页面,效果相当不差 // ****************************************************** window.print(); window.history.go(0); } } --> </script> <style> @media print { .noprint {display:none} } </style> <!--//.noprint 定义了noprint,在以下不需要打印的地方加入 class="noprint"后,用window.print()打印就会忽略--> </head> <body> <p align="center"> 非打印部分!!</p> <p><div id="divPrint">divPrint...需要打印的内容!!!. <p> </p> 本人严正声明:此帖在全世界只有一个沙发。本人是该沙发的唯一合法代表。自古以来本人一直对该沙发行使着主权。沙发两边的扶手是沙发不可分割的一部分,任何企图想制造两个沙发,或一个沙发一个扶手的行为,都必将遭到包括中国网民在内的全世界网民的反对!各族网民反对沙发分裂、维护沙发统一、维护沙发稳定的决心是坚定不移的,任何破坏沙发稳定、制造沙发分裂的图谋都是不得人心的,是注定要失败的! </div></p> <p> <center> <a onclick="PrintPage() " style="text-decoration: underline; cursor: hand;">[ 打 印 ]</a> </center> </p> <p> </p> <p>打开“页面设置”对话框</p> <p align="center"><img src="http://www.ljjyw.com/datas/wen/print_htm.files/guide7.jpg" width="393" height="382" longdesc="http://www.ljjyw.com/datas/wen/print_htm.files/guide7.jpg" /></p> <p> </p> <p align="left"></p> <table align="center" border="1" width="80%"> <tbody> <tr> <th>符号</th> <th>含义</th> </tr> <tr> <td>&w</td> <td>网页标题</td> </tr> <tr> <td>&u</td> <td>网页地址 (URL)</td> </tr> <tr> <td>&d</td> <td>短日期格式(由“控制面板”中的“区域设置”指定)</td> </tr> <tr> <td>&D</td> <td>长日期格式(由“控制面板”中的“区域设置”指定)</td> </tr> <tr> <td>&t</td> <td>由“控制面板”中的“区域设置”指定的时间格式</td> </tr> <tr> <td>&T</td> <td>24 小时时间格式</td> </tr> <tr> <td>&p</td> <td>当前页码</td> </tr> <tr> <td>&P</td> <td>总页数</td> </tr> <tr> <td>&b</td> <td>文本右对齐(请把要右对齐的文字放在“&b”之后)</td> </tr> <tr> <td>&b&b</td> <td>文字居中(请把要居中的文字放在“&b”和“&b” 之间)</td> </tr> <tr> <td>&&</td> <td>单个 & 号 (&)</td> </tr> </tbody> </table> </p> <p> 注:1、这些符号可以与文字组合使用,如本教程中的“页码,&p/&P”。<br /> 2、页眉和页脚默认是左对齐的,所以IE只提供了右对齐和居中的设置符号。<br /> 3、推荐给大家一种设置方法:页眉为空,页脚设为“&b第 &p 页 / 共 &P 页&b”,打印效果为在页脚居中显示“第 1 页 / 共 4 页”的效果。</p> <p> </p> <p> </p> <br/> </p> <p></p> <p> </p> </body> </html>
6、网上搜的,未细看,但可以去除页眉和页脚,可下载可去除页眉页脚及选择打印部分.rar
<HTML><HEAD><TITLE>web打印去掉页眉页脚,以及不想打印出的页面元素</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <SCRIPT language=javascript> function printpr() //预览函数 { document.all("qingkongyema").click();//打印之前去掉页眉,页脚 document.all("dayinDiv").style.display="none"; //打印之前先隐藏不想打印输出的元素(此例中隐藏“打印”和“打印预览”两个按钮) var OLECMDID = 7; var PROMPT = 1; var WebBrowser = ‘<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>‘; document.body.insertAdjacentHTML(‘beforeEnd‘, WebBrowser); WebBrowser1.ExecWB(OLECMDID, PROMPT); WebBrowser1.outerHTML = ""; document.all("dayinDiv").style.display="";//打印之后将该元素显示出来(显示出“打印”和“打印预览”两个按钮,方便别人下次打印) } function printTure() //打印函数 { document.all(‘qingkongyema‘).click();//同上 document.all("dayinDiv").style.display="none";//同上 window.print(); document.all("dayinDiv").style.display=""; } function doPage() { layLoading.style.display = "none";//同上 } </SCRIPT> <script language="VBScript"> dim hkey_root,hkey_path,hkey_key hkey_root="HKEY_CURRENT_USER" hkey_path="\Software\Microsoft\Internet Explorer\PageSetup" ‘//设置网页打印的页眉页脚为空 function pagesetup_null() on error resume next Set RegWsh = CreateObject("WScript.Shell") hkey_key="\header" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"" hkey_key="\footer" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"" end function ‘//设置网页打印的页眉页脚为默认值 function pagesetup_default() on error resume next Set RegWsh = CreateObject("WScript.Shell") hkey_key="\header" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&w&b页码,&p/&P" hkey_key="\footer" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&u&b&d" end function </script> </HEAD> <BODY background="images/background_01.gif" leftMargin=0 topMargin=0 rightMargin=0 bottomMargin=0 style="BACKGROUND-POSITION: center 50%"> <DIV align=center> 你希望打印的内容.......... </DIV> <DIV align="center" id="dayinDiv" name="dayinDiv"><input type="button" class="tab" value="打印" onclick="printTure();"> <input type="button" class="tab" value="打印预览" onclick="printpr();"> <input type="hidden" name="qingkongyema" id="qingkongyema" class="tab" value="清空页码" onclick="pagesetup_null()"> <input type="hidden" class="tab" value="恢复页码" onclick="pagesetup_default()"> </DIV> </BODY> </HTML>
另外有个实用的js应用大全:
http://blog.csdn.net/panxuan/archive/2007/11/26/1902826.aspx
标签:oct 窗口 history lin 1.3 sof innerhtml splay ora
原文地址:http://www.cnblogs.com/oshoh/p/6085260.html