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

最新推荐文章于 2022-12-23 14:57:00 发布
最新推荐文章于 2022-12-23 14:57:00 发布
阅读量5.9k 收藏 4
点赞数
分类专栏： WEB技术文章 文章标签： web class button webbrowser border input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/banmuhuangci/article/details/571019
版权

说明：
首先是创建一个打印对象，
<OBJECT  id=WebBrowser  classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2  height=0  width=0></OBJECT>
创建好后就可以使用该对象的各种方法进行打印操作：
<input  type=button  value=打印          οnclick=document.all.WebBrowser.ExecWB(6,1)>
<input  type=button  value=直接打印  οnclick=document.all.WebBrowser.ExecWB(6,6)>
<input  type=button  value=页面设置  οnclick=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=打印          οnclick=document.all.WebBrowser.ExecWB(6,1)>
  <input  type=button  value=直接打印  οnclick=document.all.WebBrowser.ExecWB(6,6)>
  <input  type=button  value=页面设置  οnclick=document.all.WebBrowser.ExecWB(8,1)>
</p>
  <p>    <input  type=button  value=打印预览  οnclick=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>

ZetaChow晓代码
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html如何设置打印分页打印出来,网页中如何用 CSS 设置打印分页符
weixin_27791839的博客
06-17 2615
Word 中按 Ctrl + Enter 创建一个分页符，方便打印，其实网页中也可以，用 CSS 的 page-break-after:always;。第1页第2页第3页任何浏览器都支持 page-break-after:always;，但 page-break-after 的其他属性值 left、right、inherit、avoid 则总有一些浏览器不支持。page-break-a...
html网页怎么分页打印,web如何实现页面分页打印
weixin_42510962的博客
06-21 3743
实现页面分页打印是很多小伙伴们都想知道的，那么你知道web如何实现页面分页打印的具体方法吗？下面就让爱站小编带领大家一起去学习学习吧，希望本文对你有所帮助。1．首先引入一个WebBrowser在需要打印的页面，可以直接添加：???到页面，或者使用JavaScript在需要的时候临时添加也可以：???document.body.insertAdjacentHTML("beforeEnd","clas...
web 页面分页打印的实现
09-06
网上找的，经我整理添加demo如下
页面布局和自定义分页展示
01-10
用bootstrap框架搭建的页面布局,还有自定义的页面展示,要比分页插件的好看许多
对table的设置及打印分页
Alan的专栏
11-22 4616
1.empty-cells: 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。2.设置打印分页：  说明：page-break-after:always   控制分页  .pageSeparator{visibility:hidden; page-break-after:always; overflow:hidden; height:0px;}3.设置细边框 table   .trborder {         border-collapse:collapse;borderer:none;
Web页面分页打印小结-简单实现
gukehui2012的博客
11-30 1万+
最近开发单位内部系统中的档案管理时，档案管理员提出需求，希望在打印档案盒中卷内目录，分页打印，因为目前的打印针对超过一页的档案记录，在第二页中无法显 示表头，还会出现表格断开不连续如图： 档案管理员想打印时，系统自动分页并且每页都有表头 如图 解决方案就是确定每页记录数，这里设置每页15个记录 经改进：1.增加了分页显示，档案管理员可以根据选
vue print 解决打印每页都有表头
weixin_43866627的博客
12-23 1821
vue print 解决打印每页都有表头
实现WEB打印的几种方法
az44yao的专栏
04-22 3730
当前WEB应用开发非常流行，主要原因是WEB应用客户端的规则很简单，容易学习，容易维护，容易发布，降低了开发难度。但是，WEB应用的打印一直以来却是一个难题，特别是在应用中完成标签打印（如包裹面单、货运标签等）、票据打印（如零售小票）难度较大，其难度在于如何将需要打印的内容，精确套打到标签、票据中，精确控制分页，并实现高速连续打印。 对于WEB打印，当前有几种常见的方法，下面分别介绍，希望对大家有所帮助。 一、直接使用浏览器的打印功能 使用打印菜单或windows.print()的即可。这种方案的优势
HTML生成PDF、web打印动态分页、预览。内容满了，自动换页、移动端兼容 bookjs-eazy
NOP
01-19 5935
web打印自动分页，生成PDF。内容满了，自动换页。bookjs-eazy 转自：https://www.zhouwuxue.com 预览案例 eazy-2.html 另一个小说案例 除了自动分页，打印页码。还可以生成目录 使用方式： 配置页面参数： 在全局定义一个bookConfig <script> bookConfig = { pageSize : 'A4', // 定义纸张大小 // orientation : 'portrait',// lands
web打印三种实现方式
热门推荐
masonqiang的博客
04-09 1万+
web打印的方式可以分为3种：1、window.print()直接调用浏览器；2、利用js插件调用浏览器打印；3、利用第三方插件直接调用打印机。3种方式各有不同的使用场景和灵活度，接下来进行探讨比较
JS 实现web分页打印功能
11-09
使用JS的Window对象的Print方法实现兼容性强的分页打印功能，可直接运行，代码直接复制即可用。
JS分页，WEB分页打印
05-03
实现简单的web打印分页功能，适用于WEB工程的打印预览
Web分页打印 细线表格+分页打印之终极攻略
09-28
最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而
Web Html 分页、表格跨页断裂处理、自定义页眉页脚页码打印控件
10-11
1.Web Html 分页打印 2.内容、图片、表格跨页断裂，封边 3.table并行、并列双边、重边 4.自动计算页码（总数及每一页），样式、位置、形式完全个性化 5.页眉页脚，去除浏览默认，自定义内容、样式、位置 6.保持页脚...
xml中文出错问题解决方法
ZetaChow
09-29 8431
初学XML的时候会经常出现当XML的节点内容中包含中文的时候出错的问题。用专业的XML开发工具时就不会出现问题，但用文本编辑器编辑的很容易出现这个问题。实际上这并不难解决，这是由于声明的编码与文件默认编码不符合造成的。XML文件的默认编码是UTF-8的，文本编辑器保存文件的默认编码是ANSI。例如在利用文本编辑器生成如下XML文件时中文english或中文englishXM
HTTP PUSH技术原理，结合ASP.NET实现以及评述
ZetaChow
09-20 7273
    前段时间看到有人写的关于HTTP PUSH原理，当初并不在意，因为HTTP的先天问题，WEB服务器不可能主动PUSH因为HTTP响应过后就断开连接，WEB服务器不可能再触发什么事件后对某个客户端浏览器进行PUSH信息的。    最近闲在家中，又突然想起这件事情，虽然说自我感觉这并不是正统的PUSH技术，但是毕竟已经有人在用，而且效果还不错，不如自己也来试试看。经过小小尝试，发现其实HT
判断页面关闭的方法 UNLOAD/onbeforeunload
ZetaChow
12-29 6263
最近一个朋友做在线统计，问我怎么判断用户登陆和离开。获得用户登陆不用说了，大家都知道，判断离开的话就有一点问题了，如果说用户都是按照设计者的规定的范围触发退出事件离开的话那就没什么难度了，但是用户的离开方式多种多样，怎么在用户非法离开的时候既时的判断离开呢？最常见的非法离开就是关闭浏览器了。====================================================
js设置html打印不分页,web 页面分页打印的实现
最新发布
06-13
可以通过CSS样式控制打印分页的行为。具体方法如下： 1. 在CSS样式表中添加以下代码，设置页面不分页： ``` @media print { html, body { height: auto !important; overflow: visible !important; page-break...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值