懒人模板网--最新最全织梦模板,Discuz论坛模板,手机网站模板
当前位置:懒人模板>懒人教程>编程教学>

js或jquery实现页面打印可局部打印

发布时间:2018-09-10 来源:未知 浏览: 关键词:
js或jquery实现页面打印(局部打印) 

1、js实现(可实现局部打印) 
代码如下:

	
  1.  
    <html>
  2.  
    <title>js打印</title>
  3.  
    <head></head><body>
  4.  
    <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />
  5.  
     
  6.  
    <input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />
  7.  
    <style type="text/css" media=print>
  8.  
    .noprint{display : none }
  9.  
    </style>
  10.  
     
  11.  
     
  12.  
    <p class="noprint">不需要打印的地方</p>
  13.  
     
  14.  
    <script>
  15.  
    function preview(oper)
  16.  
    {
  17.  
    if (oper < 10)
  18.  
    {
  19.  
    bdhtml=window.document.body.innerHTML;//获取当前页的html代码
  20.  
    sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
  21.  
    eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
  22.  
    prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
  23.  
     
  24.  
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
  25.  
    window.document.body.innerHTML=prnhtml;
  26.  
    window.print();
  27.  
    window.document.body.innerHTML=bdhtml;
  28.  
    } else {
  29.  
    window.print();
  30.  
    }
  31.  
    }
  32.  
    </script>
  33.  
    <p>XXXXX</p>
  34.  
    <!--startprint1-->要打印的内容<!--endprint1-->
  35.  
    </body>
  36.  
    </html>
2、调用windows底层打印,报安全警告,不建议使用(不支持局部打印) 
代码如下:

	
  1.  
    <HTML>
  2.  
    <HEAD>
  3.  
    <TITLE>javascript打印-打印页面设置-打印预览代码</TITLE>
  4.  
    <META http-equiv=Content-Type content="text/html; charset=gb2312" />
  5.  
    <SCRIPT language=javascript>
  6.  
      function printsetup(){
  7.  
      // 打印页面设置
  8.  
      wb.execwb(8,1);
  9.  
      }
  10.  
      function printpreview(){
  11.  
      // 打印页面预览
  12.  
        
  13.  
      wb.execwb(7,1);      
  14.  
        
  15.  
      }
  16.  
     
  17.  
      function printit()
  18.  
      {
  19.  
      if (confirm('确定打印吗?')) {
  20.  
      wb.execwb(6,6);
  21.  
      }
  22.  
      }
  23.  
      </SCRIPT>
  24.  
    </HEAD>
  25.  
    <BODY>
  26.  
     
  27.  
    <DIV align=center>
  28.  
    <OBJECT id=wb height=0 width=0
  29.  
    classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>
  30.  
    <INPUT onclick=javascript:printit() type=button value=打印 name=button_print />
  31.  
    <INPUT onclick=javascript:printsetup(); type=button value=打印页面设置 name=button_setup />
  32.  
    <INPUT onclick=javascript:printpreview(); type=button value=打印预览 name=button_show />
  33.  
    一按开始的减肥了卡时间段
  34.  
    </DIV>
  35.  
    </BODY>
  36.  
    </HTML>
3、jQuery实现(支持局部打印) 
代码如下:

  1.  
    <html>
  2.  
    <head>
  3.  
    <script type="text/javascript" src="jquery-1.6.4.js"></script>
  4.  
    <script>
  5.  
    $(function(){
  6.  
    $("input#biuuu_button").click(function(){
  7.  
    $("div#myPrintArea").printArea();
  8.  
    });
  9.  
    </script>
  10.  
    </head>
  11.  
    <body>
  12.  
    <input id="biuuu_button" type="button" value="打印"></input>
  13.  
    <div id="myPrintArea">.....文本打印部分.....</div> <div class="quote_title">引用</div><div class="quote_div"></div>
  14.  
    </body>
  15.  
    </html>

责任编辑:懒人模板小编
共有人阅读,期待你的评论!评论
编程教学
二次开发
使用技巧
调试安装
运营推广
IT行业新闻
编程教学
2016-2018 懒人在线网 版权所有:深圳市一路互联信息技术有限公司 备案号:粤ICP备15061805号-1