WEB页面打印方法,包括如何设置打印分页

说明:
首先是创建一个打印对象,
<OBJECT  id=WebBrowser  classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2  height=0  width=0></OBJECT>
创建好后就可以使用该对象的各种方法进行打印操作:
<input  type=button  value=打印          onclick=document.all.WebBrowser.ExecWB(6,1)>
<input  type=button  value=直接打印  onclick=document.all.WebBrowser.ExecWB(6,6)>
<input  type=button  value=页面设置  onclick=document.all.WebBrowser.ExecWB(8,1)>
最常用的就这3个方法了,写在按钮控件的ONCLICK事件里,当按钮CLICK的时候就会除法打印的事件了

以上的步骤就可以实现页面的打印了,但是如何设置打印区域和打印分页呢?
最重要的地方就是这里了:
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
自定义两个CLASS类样式,注意,style的media属性是print,也就是说这个style块中的样式是为打印设置的,Noprint类:在打印事不显示,CLASS属性设置为Noprint类样式的控件打印的时候不会显示;PageNext类设置的是分页,CLASS属性设置为PageNext类样式的控件将被作为打印分页点,并属于上一页。
Noprint和PageNext 这两个都是自己定义的,名字当然可以自己改,同样也可以将这两个样式类定义写在CSS文件里

以上的说明就是页面控制打印的几个重要的地方,以下是完整代码。可以直接复制到HTM/HTML文档里看看效果。

<html>
<head>
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<title>看看</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--media=print 这个属性可以在打印时有效-->
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>

<style>
.tdp
{
    border-bottom: 1 solid #000000;
    border-left:  1 solid #000000;
    border-right:  0 solid #ffffff;
    border-top: 0 solid #ffffff;
}
.tabp
{
    border-color: #000000 #000000 #000000 #000000;
    border-style: solid;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 1px;
    border-left-width: 1px;
}
.NOPRINT {
 font-family: "宋体";
 font-size: 9pt;
}

</style>

</head>

<body >
<center class="Noprint" >
  <p>
  <OBJECT  id=WebBrowser  classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2  height=0  width=0>
  </OBJECT>
  <input  type=button  value=打印          onclick=document.all.WebBrowser.ExecWB(6,1)>
  <input  type=button  value=直接打印  onclick=document.all.WebBrowser.ExecWB(6,6)>
  <input  type=button  value=页面设置  onclick=document.all.WebBrowser.ExecWB(8,1)>
</p>
  <p>    <input  type=button  value=打印预览  onclick=document.all.WebBrowser.ExecWB(7,1)>
    <br/>
    </p>
  <hr align="center" width="90%" size="1" noshade>
</center>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0"  class="tabp">
 <tr>
  <td colspan="3" class="tdp">第1页</td>
    </tr>
 <tr>
   <td width="29%" class="tdp">&nbsp;</td>
   <td width="28%" class="tdp">&nbsp;</td>
      <td width="43%" class="tdp">&nbsp;</td>
  </tr>
 <tr>
   <td colspan="3" class="tdp">&nbsp;</td>
  </tr>
 <tr>
   <td colspan="3" class="tdp"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="50%" class="tdp"><p>这样的报表</p>
          <p>对一般的要求就够了。</p></td>
          <td>&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
<hr align="center" width="90%" size="1" noshade class="NOPRINT" >
<!--分页-->
<div class="PageNext"></div>
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0"  class="tabp">
  <tr>
    <td class="tdp">第2页</td>
  </tr>
  <tr>
    <td class="tdp">看到分页了吧</td>
  </tr>
  <tr>
    <td class="tdp">&nbsp;</td>
  </tr>
  <tr>
    <td class="tdp">&nbsp;</td>
  </tr>
  <tr>
    <td class="tdp"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="50%" class="tdp"><p>这样的报表</p>
              <p>对一般的要求就够了。</p></td>
          <td>&nbsp;</td>
        </tr>
    </table></td>
  </tr>
</table>
<hr align="center" width="90%" size="1" noshade class="NOPRINT" >
<div class="PageNext"></div>
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0"  class="tabp">
  <tr>
    <td class="tdp">第3页</td>
  </tr>
  <tr>
    <td class="tdp">看到分页了吧</td>
  </tr>
  <tr>
    <td class="tdp">&nbsp;</td>
  </tr>
  <tr>
    <td class="tdp">&nbsp;</td>
  </tr>
  <tr>
    <td class="tdp"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="50%" class="tdp"><p>这样的报表</p>
              <p>对一般的要求就够了。</p></td>
          <td>&nbsp;</td>
        </tr>
    </table></td>
  </tr>
</table>
<div style="page-break-after:always"></div>
这是第4页
</body>
</html>

你可能感兴趣的:(Web)