利用js和CSS实现网页局部打印

局部打印方法:

作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题。
使用方法:将要打印的内容通过

<span id="dayin"></span> 

包含起来

添加一个按钮,来激活这个打印

<input type="button" onclick="dayin()" value="打印"> 

添加一个js,header 或 footer

function dayin()
{ var code="<body onload=window.print()>"; code+=document.getElementById("dayin").innerHTML; code+="</body>"; var newwin=window.open(’’,’’,’’); newwin.opener = null; newwin.document.write(code); newwin.document.close();
}  

2 利用CSS实现局部打印
介绍两个关键的CSS

<style media="print"> .Noprint { DISPLAY: none }  .PageNext{ PAGE-BREAK-AFTER: always } </style>

第一个在不需要打印的标签上添加(子标签也将不被打印),第二个在需要换行的标签处添加(该标签所表示的内容将在当前打印的一页内)
接下来通过调用最基本的js语句
window.print()就可实现页面局部打印了,很easy吧!

 3 打印预览

<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=3></OBJECT> <input class="ipt" type=button name= button _print value="打印" onclick ="  javascript  :printit();"> <input class="ipt" type=button name=button _setup value="打印页面设置" onclick ="  javascript  :  printsetup();"> <input class="ipt" type=button name=button_show value="打印预览" onclick="javascript:printpreview();"> <input class="ipt" type=button name= button _fh value="关闭" onclick ="    javascript:window.close();"> 

您可以选择一种方式赞助本站

目前评论:8   其中:访客  5   博主  3

  1. 2010年10月01日 11:33  沙发
  2. 2010年10月01日 19:28  板凳
  3. 2010年10月01日 10:37  地板
  4. 2010年10月01日 15:51  4楼
  5. 2010年10月01日 11:11  5楼
  6. 2010年10月01日 14:56  6楼
  7. 2010年10月01日 11:10  7楼
  8. 2010年10月01日 11:25  8楼
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: