• 打印时有选择的打印


    1、今天遇到这样的问题,打印时要把一个页面的不同内容,按用户需求打印不同的块。首先,我用了<div/>括住不同的块,以便控制打印与否。

    2、打印选择用了checkbox:

     1 <div class="Noprint" align="center">
     2     <table  border="0" cellspacing="0" cellpadding="0" align="center"  >
     3         <tr>
     4             <td>
     5                 
     6                 <input id=p1 type="checkbox" checked="checked">第二联
     7                 <input id=p2 type="checkbox" checked="checked">第三联
     8                 <input id=p3 type="checkbox" checked="checked">第四联
     9                  <input type="button" value="执行打印" onclick="print()" style=" 70; height: 30">
    10                  <input type="button" value="打印预览" onclick="preview()" style=" 70; height: 30">    
    11                  <input type="button" value="上一页" onclick="previousjsp()" style=" 70; height: 30">    
    12             </td>
    13         </tr>
    14     </table>
    15 </div>

    3、其中的div的class="Noprint"是在上面的style里面控制打印与否的属性

     1 <style type="text/css">
     2         .td_font {
     3             font-size:12px;
     4         }
     5         @media print {
     6                .Noprint {display:none;};
     7         }
     8         .d {
     9             float:left;
    10         }
    11         .i,.a {
    12             border:1px solid #000;
    13             12px;
    14             height:12px;
    15             margin-left:2px;
    16             float:left;
    17             position:relative;
    18         }
    19         .id{
    20             float:right;
    21         }
    22     </style>

    4、打印和预览时,利用javascript对属性进行控制:

     1 function print()
     2         {
     3             if(!document.getElementById("p1").checked)
     4             {
     5                 document.getElementById("no1").className="Noprint";
     6             }
     7             if(!document.getElementById("p2").checked)
     8             {
     9                 document.getElementById("no2").className="Noprint";
    10             }
    11             if(!document.getElementById("p3").checked)
    12             {
    13                 document.getElementById("no3").className="Noprint";
    14             }
    15             wb.execwb(6,6);
    16             myDisplay();
    17         }
    18         function preview()
    19         {
    20             if(!document.getElementById("p1").checked)
    21             {
    22                 document.getElementById("no1").className="Noprint";
    23             }
    24             if(!document.getElementById("p2").checked)
    25             {
    26                 document.getElementById("no2").className="Noprint";
    27             }
    28             if(!document.getElementById("p3").checked)
    29             {
    30                 document.getElementById("no3").className="Noprint";
    31             }
    32             wb.execwb(7,1);
    33             myDisplay();
    34         }
    35         function myDisplay()
    36         {
    37             document.getElementById("no1").className="";
    38             document.getElementById("no2").className="";
    39             document.getElementById("no3").className="";
    40         }

    需要说明的是,我刚开始时用的是document.getElementById().style.display="none";使div块隐藏,

    在myDisplay()里用document.getElementById().style.display="";再使div显示出来,

    这样出现了一个问题,就是当打印预览时会出现一个闪屏效果—>隐藏的再显示出来;

    而是用className="Noprint",就是显示了,也不让打印!

    我很小我很弱,我在慢慢成长!
  • 相关阅读:
    jquery 序列化form表单
    nginx for windows 安装
    nodejs idea 创建项目 (一)
    spring 配置 shiro rememberMe
    idea 2018 解决 双击shift 弹出 search everywhere 搜索框的方法
    redis 在windows 集群
    spring IOC控制反转和DI依赖注入
    redis 的安装
    shiro 通过jdbc连接数据库
    handlebars的用法
  • 原文地址:https://www.cnblogs.com/lvzhanhui/p/xiaoqiaolv_print.html
Copyright © 2020-2023  润新知