实现页面打印(JS 、JQuery)

来源：互联网发布：永宏plc编程软件下载编辑：程序博客网时间：2024/05/17 05:13

以下是两种打印的功能实现
1)js实现打印 – window.print(); (支持全局或局部打印)
该方法是js提供的，直接打印页面上中的所有内容(即全局打印)，如果需要打印页面上的一部分内容(即局部打印)，可以用indexOf() 和 substring()实现页面的内容的截取。

Html代码

<!Doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>打印</title>    <!--将不需要打印的部分，标记为 class="noprint" -->      <style type="text/css" media="print">         .noprint{display : none }      </style>     </head><body>    <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />      <input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />       <p class="noprint">全局打印时:不需要打印的地方</p>      <p>全局打印时: 打印的部分</p>      <!--startprint1-->全局和局部都要打印: 要打印的内容..<!--endprint1-->        <!--打印的实现:全局打印 start-->      <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>  </body></html>

注解: 加了media=”print”，只有在打印时，下面的style才能生效

<style type="text/css" media="print">      .noprint{display : none }  </style>

2）jquery实现打印 (支持全局或局部打印)
引用jquery.PrintArea.js中的printArea()
例如： $(“div#myPrintArea”).printArea(); //打印div中的内容

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>   <script type="text/javascript" src="jquery.PrintArea.js"></script>   <script>  $(document).ready(    function(){        $("input#printBtn").click(function(){        $("div#myPrintArea").printArea();      });  });     </script>  <input id="printBtn" type="button" value="打印"></input>   <div id="myPrintArea">.....文本打印部分.....</div>

0 0