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>

@media print{    } 自定义两个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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CWIKIUS

Confluence 6 安全概述和建议概述 原

这个文档是针对 Confluence 的系统管理员希望对 Confluence Web应用程序安全性进行评估而设计的。这个页面将对系统的安全进行大致的描述,同时...

19440
来自专栏我和我大前端的故事

web前端如何准备面试工作??

其实我也不知道要怎么准备面试工作,我一直在准备,时刻准备着面试。既然不知道要怎么准备,那我就看看书吧,顺便推荐你看看。我要推荐一本书,《javascript 忍...

19410
来自专栏空木白博客

一个有趣好玩的HTML网页

daniwell ( Nyan cat 作者) 遵循原作者的说明,作品仅用于非盈利的公共使用用途,无需告知

1K40
来自专栏痴者工良

重装Win10系统的非常简单的操作教程

 这是回到学校的第二天,准备搞一份实习证明,然而宿舍宽带停了,于是我来到了社团办公室,打开了其中一台电脑。

23400
来自专栏bamboo前端学习记录

html中表单提交

31120
来自专栏程序生活

Python提取中文字符

写这个jupyter的原因是好几次自己爬完新闻之后,发现中间有些是html标签代码或者其他多余的英文字符,自己也不想保留,那么这时候一个暴力简单的方法就是使用 ...

40750
来自专栏CWIKIUS

Confluence 6 使用 Apache 和 mod_proxy 添加 SSL和其他

如果你计划在你的应用中启用 SSL ,请参考 Securing your Atlassian applications with Apache using SS...

12130
来自专栏mySoul

简易 MVC框架 弃坑

![](https://melovemingming-1253878077.cos.ap-chengdu.myqcloud.com/blog-image/201...

13730
来自专栏终身学习者

JavaScript是如何工作的:Web Workers的构建块+ 5个使用他们的场景

这次我们会逐步讲解 Web Workers,先说个简单的概念,接着讨论不同类型的 Web Workers,他们的组成部分是如何一起工作的,以及不同场景下它们各自...

6610
来自专栏CWIKIUS

Confluence 6 配置白名单 原

Confluence 管理员可以通过添加 URLs 到白名单选择出入的链接和使用 RSS 宏,HTML 包含宏和小工具中的内容。

11360

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励