zoukankan      html  css  js  c++  java
  • 使用jquery插件实现打印指定区域功能

    程序员话不多,直接上代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
        <head>
            
    <title>支持放大显示效果的TOP排行</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <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#biuuu_button").click(function(){   
      
      $("div#myPrintArea").printArea();   
      
    });   
    });   
        
    </script>  
    </head>
    <body>  
    <input id="biuuu_button" type="button" value="打印"/> 
      
    <div id="myPrintArea">
        <table width="760"  style="border:0.5px solid #000000" borderColor="#000000" align="center" cellpadding="0" cellspacing="0" class="tableBorder5">
          <tr> 
            <td height="30" colspan="6" align="center" class="TableTitle1"><b>报 修 的 详 细 资 料</b></td>
      </tr>
      <tr align="center" > 
        <td width="118" height="30" class="TableBody1">报修编号:</td>
        <td width="112" height="30" class="TableBody1" ><span class="style2">BX2011082905983</span></td>
        <td width="120" class="TableBody1" >报修地点:</td>
        <td width="136" class="TableBody1" ><span class="style2">
          竹园
        </span></td>
        <td width="134" height="30" class="TableBody1" >故障物品<span lang="en-us">/</span>部件:</td>
            <td width="131" class="TableBody1" ><span class="style2">
              磁卡锁
            </span></td>
      </tr>
          <tr align="center">
            <td width="118" height="30" class="TableBody1" >报修人:</td>
            <td width="112" height="30" class="TableBody1" ><span class="style2">信息员十号</span></td>
            <td width="120" height="30" class="TableBody1" >预约维修日期:</td>
            <td width="136" height="30" class="TableBody1" ><span class="style2">2011-08-29</span></td>
            <td height="30" class="TableBody1" >报修日期:</td>
            <td height="30" class="TableBody1" ><span class="style2">2011-8-29</span></td>
          </tr>
          <tr align="center">
            <td width="118" height="30" class="TableBody1" >联系电话:</td>
            <td width="112" height="30" class="TableBody1" ><span class="style2">15955105802</span></td>
            <td width="120" height="30" class="TableBody1" >预约维修时间:</td>
            <td width="136" height="30" class="TableBody1" ><span class="style2">29号</span></td>
            <td height="30" class="TableBody1" > </td>
            <td height="30" class="TableBody1" > </td>
          </tr>
      <tr > 
        <td width="118" height="30" align="center" class="TableBody1" >报修地址:</td>
        <td height="30" colspan="5" class="TableBody1" >&nbsp;<span class="style2">竹园-1323</span></td>
          </tr>
      <tr >
        <td height="30" align="center" class="TableBody1" >具体故障现象:</td>
            <td colspan="5" class="TableBody1" >&nbsp;<span class="style2">竹园-1323   配钥匙(已交费)</span></td>
      </tr>
     
    </table>
    </div>   
    </body>
    </html>

    效果图:

    不同浏览器效果不同

    google浏览器比较好

    这是IE的效果:

  • 相关阅读:
    从键盘输入两个数字,根据订单或大或小的输出
    软考路(3)——数据流图的尖
    HDU 3988 Harry Potter and the Hide Story(数论-整数和素数)
    排序算法门外汉理解-Shell排序
    流量计算-Jstorm提交Topology过程(下一个)
    CentOS在安装配置 Ngnix_tomcat_PHP_Mysql
    C++基于该模型模板包括节目外实例
    同ListView该接口无法通过手势滑动左右切换界面问题解决方法
    用彩虹表破解MD5、LM Hash等复杂加密密码
    logstash
  • 原文地址:https://www.cnblogs.com/smile361/p/2649894.html
Copyright © 2011-2022 走看看