WebBrowser 的打印控件

WebBrowser 的打印

 

可以直接下载 打印示例 查看

 

html代码 + 样式：

Java代码

1. <style media="print">     
2.                               .Noprint{display:none;}  <!--用本样式在打印时隐藏非打印项目-->     
3.                               .PageNext{page-break-after: always;} <!--控制分页-->     
4.                             </style>     
5.                             <object id="WebBrowser"  width="0"  height="0"  classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>        
6.                             <center class="Noprint" >   
7.                                 <input type="button"  value="打印预览" οnclick="document.all.WebBrowser.ExecWB(7,1)">   
8.                                 <input type="button"  value="打 印"    οnclick="document.all.WebBrowser.ExecWB(6,1)">     
9.                                 <input type="button"  value="页面设置" οnclick="document.all.WebBrowser.ExecWB(8,1)">   
10.                                 <input type="button"  value="恢复页码"  οnclick="PageSetup_Default()">       
11.                                 <input type="button"  value="关 闭"    οnclick="document.all.WebBrowser.ExecWB(45,1)">    
12.                             </center>  

<style media="print">  
							  .Noprint{display:none;}  <!--用本样式在打印时隐藏非打印项目-->  
							  .PageNext{page-break-after: always;} <!--控制分页-->  
							</style>  
							<object id="WebBrowser"  width="0"  height="0"  classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>     
							<center class="Noprint" >
								<input type="button"  value="打印预览" οnclick="document.all.WebBrowser.ExecWB(7,1)">
								<input type="button"  value="打 印"    οnclick="document.all.WebBrowser.ExecWB(6,1)">  
								<input type="button"  value="页面设置" οnclick="document.all.WebBrowser.ExecWB(8,1)">
								<input type="button"  value="恢复页码"  οnclick="PageSetup_Default()">    
								<input type="button"  value="关 闭"    οnclick="document.all.WebBrowser.ExecWB(45,1)"> 
							</center>

 

js 代码：

Js代码

1. <script type="text/javascript">   
2. var HKEY_Root,HKEY_Path,HKEY_Key;    
3. HKEY_Root="HKEY_CURRENT_USER";    
4. HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";    
5. //设置网页打印的页眉页脚为空   
6. function PageSetup_Null(){    
7.  try{    
8.       var Wsh=new ActiveXObject("WScript.Shell");    
9.       HKEY_Key="header";    
10.       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");    
11.       HKEY_Key="footer";    
12.       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");    
13.   }catch(e){   
14.     //报错了   
15.   }   
16. }    
17. //设置网页打印的页眉页脚为默认值   
18. function  PageSetup_Default(){      
19.  try{    
20.       var Wsh=new ActiveXObject("WScript.Shell");   
21.       HKEY_Key="header";    
22.       //Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P");   
23.       //去除&w 去除标题  只打印页码  
24.       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&b页码,&p/&P");   
25.       HKEY_Key="footer";    
26.       //Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d");   
27.       //去除&u 去除url  只打印时间  
28.       Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&b&d");   
29.  }catch(e){   
30.     //报错了   
31.  }    
32. }   
33. </script>  

<script type="text/javascript">
var HKEY_Root,HKEY_Path,HKEY_Key; 
HKEY_Root="HKEY_CURRENT_USER"; 
HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; 
//设置网页打印的页眉页脚为空 
function PageSetup_Null(){ 
 try{ 
      var Wsh=new ActiveXObject("WScript.Shell"); 
      HKEY_Key="header"; 
      Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); 
      HKEY_Key="footer"; 
      Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); 
  }catch(e){
    //报错了
  }
} 
//设置网页打印的页眉页脚为默认值 
function  PageSetup_Default(){   
 try{ 
	  var Wsh=new ActiveXObject("WScript.Shell");
	  HKEY_Key="header"; 
	  //Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P"); 
	  //去除&w 去除标题  只打印页码
	  Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&b页码,&p/&P");
	  HKEY_Key="footer"; 
	  //Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d"); 
	  //去除&u 去除url  只打印时间
	  Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&b&d");
 }catch(e){
 	//报错了
 } 
}
</script>

 

 

   如果你想让界面的 哪些地方打印的时候 不显示 则使用 class = "Noprint" 这个样式，分页就使用 PageNext

 

 

通常我们会在页眉加上网页的标题，在页脚加上页面代码，日期等等，我们该如何设置呢？

下面就是可供我们使用的一些项目及值。

键入	要打印
&w	窗口标题
&u	网页地址 (URL)
&d	短日期格式（由“控制面板”中的“区域设置”指定）
&D	长日期格式（由“控制面板”中的“区域设置”指定）
&t	由“控制面板”中的“区域设置”指定的时间格式
&T	24 小时时间格式
&p	当前页号
&P	网页总数
&&	单个 & 号 (&)
&b	紧跟在这些字符之后的文本居中打印。
&b&b	紧跟在第一个 "&b" 之后的文本居中打印，跟在第二个 "&b" 之后的文本按右对齐方式打印。

光看这些说明可能有些不直观，我们还是来点例子吧。

1. <script language="JavaScript" type="text/javascript">     
   
2. PageSetup('header','&b&w&b&D');   
   
3. PageSetup('footer','AJava.org网站出品&b&w&b第&p页，共&P页');   
   
4. </script>
   

复制代码

运行后页眉如下图。

1_122613_1.png(2.5 K)

3/28/2009 3:25:58 PM

图片3



页脚如下图。

1_122636_1.png(2.69 K)

3/28/2009 3:25:58 PM

图片4

对于其他的参数都很好理解，这里我只解释一下如何居左，居中，居右。

要想居中，使用“&b”，紧跟在这些字符之后的文本居中打印。例如“&b教程”，那么“教程”就会居中。

要想居右，就在居中的后面再加上“&b”。例如“&b教程&b打印系列”，那么“教程”就会居中，打印系列就会居右。

如果你不想居中，只要居右，“&b&b打印系列”这样就可以了。

第一个“&b”前面的文字都是居左。

 

css里media的使用

我们在网页里引用外部的css文件时，通常是用如下的代码：

<link rel="stylesheet" type="text/css" href="mycss.css"> 

实际上，上面的link对象里，我们是省略了一个叫“media”的属性，这个属性指定样式表规则用于指定的设备类型。它有如下值可用：
all-- 用于所有设备类型
aural-- 用于语音和音乐合成器
braille-- 用于触觉反馈设备
embossed-- 用于凸点字符（盲文）印刷设备
handheld-- 用于小型或手提设备
print-- 用于打印机
projection-- 用于投影图像，如幻灯片
screen-- 用于计算机显示器
tty-- 用于使用固定间距字符格的设备。如电传打字机和终端
tv-- 用于电视类设备

这么多的值，并不是每个都可用，因为浏览器厂商并没有全部实现它们。

在IE里面，可用的值有all，print，screen三个。上面的代码里，我们没有使用“media”，实际上IE或其他浏览器是用了“all”这个值。“screen”，用于显示器，也就是我们一般看到的效果。“print”，用于打印的效果。

也就是说，我们没有指定“media”，那么我们看到的效果和打印的效果，它们用的都是同样的css文件。如果我们指定了一个“screen”，又指定了一个“print”，那么在打印时就会用“print”指定的css来渲染网页并打印。例如一个网页里有如下代码：

1. <link rel="stylesheet" type="text/css" media="screen" href="mycss.css">   
   
2. <link rel="stylesheet" type="text/css" media="print" href="myprintcss.css">
   

复制代码

那就表示，我们通过IE看到的网页，用到的css文件是mycss.css，而通过IE打印时用到的css文件则是myprintcss.css。想到什么了吗？对，我们可以通过print的设置，来让网页上的一些不需要打印的内容隐藏起来，比如，打印按钮。实际上，media还可以这样使用：

1. <style media=print> 
   
2. //这里定义你要打印时用到的css类   
   
3. </style>
   

复制代码

或者这样使用：

1. <style> 
   
2. @media print {   
   
3. //这里定义你要打印时用到的css类   
   
4. }   
   
5. </style>
   

复制代码

css里用于打印的属性

page-break-after : auto | always | avoid | left | right | null

参数：

auto : 假如需要在对象之后插入页分割符
always :始终在对象之后插入页分割符
avoid : 避免在对象后面插入页分割符
left : 在对象后面插入页分割符直到它到达一个空白的左页边
right :在对象后面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置


这个page-break-after，主要用来在打印时插入一个分页符，分页就靠它了。它还有个双胞胎的兄弟，叫page-break-before，参数和它一样，看名字即知道它是用来在对象之前插入分页符。

示例

在理解了以上两个css用法后，下面通过一个示例来说明如何分页。

1. <HTML> 
   
2. <HEAD> 
   
3.   <TITLE> AJava.org书城订单明细</TITLE> 
   
4.   <style> 
   
5.   @media print{   
   
6.   .toolbar{display:none;}   
   
7.   }   
   
8.   .toolbar{border:1px solid #6A9BFA;background:#E8F7E8;}   
   
9.   .paging{page-break-after :always}   
   
10.   td{font-size:12px;color:#000000;}   
    
11.   </style> 
    
12. </HEAD> 
    
13.  
    
14. <BODY> 
    
15. <div class='toolbar'> 
    
16. <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0> 
    
17. </OBJECT> 
    
18. <input type=button value=打印 οnclick=document.all.WebBrowser.ExecWB(6,1)> 
    
19. <input type=button value=直接打印 οnclick=document.all.WebBrowser.ExecWB(6,6)> 
    
20. <input type=button value=页面设置 οnclick=document.all.WebBrowser.ExecWB(8,1)> 
    
21. <input type=button value=打印预览 οnclick=document.all.WebBrowser.ExecWB(7,1)> 
    
22. </div> 
    
23. <TABLE width="100%" border="0"><THEAD style="display:table-header-group;font-weight:bold"> 
    
24. <TR><TD colspan="5"  align="center" >AJava.org书城订单明细</TD> 
    
25.   </TR> 
    
26.   <TR> 
    
27.       <TD>书名</TD> 
    
28.       <TD>价格</TD> 
    
29.       <TD>送货地址</TD> 
    
30.       <TD>送货时间</TD> 
    
31.       <TD>状态</TD> 
    
32.     </TR> 
    
33. </THEAD> 
    
34.   <TR> 
    
35.     <TD>《Java 编程思想》</TD> 
    
36.     <TD>￥60.00</TD> 
    
37.     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD> 
    
38.     <TD>2009-8-8</TD> 
    
39.     <TD>已送达</TD> 
    
40.   </TR> 
    
41.   <TR> 
    
42.     <TD>《Java 编程思想》</TD> 
    
43.     <TD>￥60.00</TD> 
    
44.     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD> 
    
45.     <TD>2009-8-8</TD> 
    
46.     <TD>已送达</TD> 
    
47.   </TR> 
    
48.   <TR> 
    
49.     <TD>《Java 编程思想》</TD> 
    
50.     <TD>￥60.00</TD> 
    
51.     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD> 
    
52.     <TD>2009-8-8</TD> 
    
53.     <TD>已送达</TD> 
    
54.   </TR> 
    
55.   <TR> 
    
56.     <TD>《Java 编程思想》</TD> 
    
57.     <TD>￥60.00</TD> 
    
58.     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD> 
    
59.     <TD>2009-8-8</TD> 
    
60.     <TD>已送达</TD> 
    
61.   </TR> 
    
62.   <TR class='paging'> 
    
63.     <TD>《Java 编程思想》</TD> 
    
64.     <TD>￥60.00</TD> 
    
65.     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD> 
    
66.     <TD>2009-8-8</TD> 
    
67.     <TD>已送达</TD> 
    
68.   </TR> 
    
69.   <TR > 
    
70.     <TD>《Java 编程思想》</TD> 
    
71.     <TD>￥60.00</TD> 
    
72.     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD> 
    
73.     <TD>2009-8-8</TD> 
    
74.     <TD>已送达</TD> 
    
75.   </TR> 
    
76.   <TR> 
    
77.     <TD>《Java 编程思想》</TD> 
    
78.     <TD>￥60.00</TD> 
    
79.     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD> 
    
80.     <TD>2009-8-8</TD> 
    
81.     <TD>已送达</TD> 
    
82.   </TR> 
    
83.   <TR> 
    
84.     <TD>《Java 编程思想》</TD> 
    
85.     <TD>￥60.00</TD> 
    
86.     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD> 
    
87.     <TD>2009-8-8</TD> 
    
88.     <TD>已送达</TD> 
    
89.   </TR> 
    
90.   <TR> 
    
91.     <TD>《Java 编程思想》</TD> 
    
92.     <TD>￥60.00</TD> 
    
93.     <TD>伊拉克巴格达总统府9栋8单元7门654室</TD> 
    
94.     <TD>2009-8-8</TD> 
    
95.     <TD>已送达</TD> 
    
96.   </TR> 
    
97.   <TR> 
    
98.     <TD>《Java 编程思想》</TD> 
    
99.     <TD>￥60.00</TD> 
    
100.     <TD><B>伊拉克巴格达总统府9栋8单元7门654室</B></TD> 
     
101.     <TD>2009-8-8</TD> 
     
102.     <TD>已送达</TD> 
     
103.   </TR> 
     
104.   <TFOOT style="display:table-footer-group;font-weight:bold"> 
     
105. <TR> 
     
106. <TD colspan="5"  align="left" >以上内容纯属虚构</TD> 
     
107. </TR> 
     
108. </TFOOT> 
     
109. </TABLE> 
     
110. </BODY> 
     
111. </HTML>
     

复制代码

以上代码在IE中浏览的效果如下图。

1_172938_1.png(14.69 K)

3/28/2009 3:31:03 PM

图片1

点击打印预览，第一页如下图。

1_173002_1.png(13.13 K)

3/28/2009 3:31:03 PM

图片2


第二页如下图。

1_173013_1.png(13.29 K)

3/28/2009 3:31:03 PM

图片3


我们发现，在我们加入分页符的那行后面，自动被分到第二页了。这个例子还有一个功能，就是每页都有相同的表头和表尾，这是利用display:table-header-group和display:table-footer-group来实现的。


本例分页的效果，主要取决于表格里每行的高度，如果有某行很高，则会导致一些问题。如果每行都是固定高度，那么用这种方法则是最简单方便的。

到现在为止，我们讲述的都是利用IE本身提供的控件在进行打印设置，这种方法有它的局限：不能够以编程的方式进行页面方向的设置，而这有时很重要。接下来本道将在下一篇中进行介绍。