• 打印时有选择的打印


    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",就是显示了,也不让打印!

    我很小我很弱,我在慢慢成长!
  • 相关阅读:
    面试题目1:spring和springmvc的区别与联系
    Vue---第二十三章v-on事件处理
    Vue---第二十二章v-for循环
    Vue-接口返回的值在页面上显示
    Vue---第二十一章v-if
    Vue---第二十章class和style,v-bind
    Vue---第十九章计算属性和监听器
    Vue---第十八章元素绑定v-bind,v-on
    Vue---第十七章v-once
    Vue---第十六章devtools
  • 原文地址:https://www.cnblogs.com/lvzhanhui/p/xiaoqiaolv_print.html
Copyright © 2020-2023  润新知