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",就是显示了,也不让打印!
我很小我很弱,我在慢慢成长!