吕展辉

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
打印时有选择的打印

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="width: 70; height: 30">
10                  <input type="button" value="打印预览" onclick="preview()" style="width: 70; height: 30">    
11                  <input type="button" value="上一页" onclick="previousjsp()" style="width: 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             width: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",就是显示了，也不让打印！

posted on 2014-04-16 20:07  吕展辉  阅读(365)  评论(0)  编辑  收藏  举报