DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js或jquery如何實現頁面打印也可局部打印
js或jquery如何實現頁面打印也可局部打印
編輯:JavaScript綜合知識     

 這篇文章主要介紹了js或jquery如何實現頁面打印也可局部打印,需要的朋友可以參考下

js或jquery實現頁面打印(局部打印)    1、js實現(可實現局部打印)   代碼如下: <html>  <title>js打印</title>  <head></head><body>  <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />    <input id="btnPrint" type="button" value="打印預覽" onclick=preview(1) />  <style type="text/css" media=print>  .noprint{display : none }  </style>      <p class="noprint">不需要打印的地方</p>    <script>  function preview(oper)  {  if (oper < 10)  {  bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼  sprnstr="<!--startprint"+oper+"-->";//設置打印開始區域  eprnstr="<!--endprint"+oper+"-->";//設置打印結束區域  prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //從開始代碼向後取html    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束代碼向前取html  window.document.body.innerHTML=prnhtml;  window.print();  window.document.body.innerHTML=bdhtml;  } else {  window.print();  }  }  </script>  <p>XXXXX</p>  <!--startprint1-->要打印的內容<!--endprint1-->  </body>  </html>    2、調用windows底層打印,報安全警告,不建議使用(不支持局部打印)  代碼如下: <HTML>  <HEAD>  <TITLE>javascript打印-打印頁面設置-打印預覽代碼</TITLE>  <META http-equiv=Content-Type content="text/html; charset=gb2312" />  <SCRIPT language=javascript>    function printsetup(){    // 打印頁面設置    wb.execwb(8,1);    }    function printpreview(){    // 打印頁面預覽          wb.execwb(7,1);                }      function printit()    {    if (confirm('確定打印嗎?')) {    wb.execwb(6,6);    }    }    </SCRIPT>  </HEAD>  <BODY>    <DIV align=center>  <OBJECT id=wb height=0 width=0  classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>  <INPUT onclick=javascript:printit() type=button value=打印 name=button_print />  <INPUT onclick=javascript:printsetup(); type=button value=打印頁面設置 name=button_setup />  <INPUT onclick=javascript:printpreview(); type=button value=打印預覽 name=button_show />  一按開始的減肥了卡時間段  </DIV>  </BODY>  </HTML>    3、jQuery實現(支持局部打印)   代碼如下: <html>  <head>  <script type="text/javascript" src="jquery-1.6.4.js"></script>  <script>  $(function(){  $("input#biuuu_button").click(function(){  $("div#myPrintArea").printArea();  });  </script>  </head>  <body>  <input id="biuuu_button" type="button" value="打印"></input>  <div id="myPrintArea">.....文本打印部分.....</div> <div class="quote_title">引用</div><div class="quote_div"></div>  </body>  </html>   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved