文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >带有Javascript和CSS的MultiPage打印

问带有Javascript和CSS的MultiPage打印
EN

Stack Overflow用户
提问于 2015-02-24 10:37:31
回答 1查看 215关注 0票数 0

在打印多页报告时，我面临显示页数的问题。

下面是示例格式:

​

代码语言：javascript
复制
<style type="text/css"> body {
  counter-reset: report 1 page 0;
}
td.footer:after {
  counter-increment: page;
  content: "Page " counter(page)" of Report " counter(report);
}
.rowLabel3 {
  counter-reset: page 0;
  counter-increment: report
}
</style>
代码语言：javascript
复制
<table>
  <thead style="display: table-header-group;">
    <tr>
      <th>Report Specific Header Contents which needs to come on every page we are displaying report</th>
    </tr>
  </thead>
  <tbody style="display: table-row-group;">
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>

  </tbody>
  <tfoot style="display: table-footer-group;">
    <tr>
      <td class="footer">

      </td>
    </tr>
  </tfoot>
</table>

<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div>

<table>
  <thead style="display: table-header-group;">
    <tr>
      <th>Report Specific Header Contents which needs to come on every page we are displaying report</th>
    </tr>
  </thead>
  <tbody style="display: table-row-group;">
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
  </tbody>
  <tfoot style="display: table-footer-group;">
    <tr>
      <td class="footer">

      </td>
    </tr>
  </tfoot>
</table>
<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div>​

​

在这里，当the出现在每个页面上时，它实际上不会增加该节。

如果这种方法是正确的，那么我尝试的方法也是计算行的no，然后在40行之后添加额外的行，然后用page添加一个分页。但这在不同的报告中是不一致的。

html
css
javascript
jquery
EN

回答 1

Stack Overflow用户

发布于 2015-02-24 10:50:59

是这样的工作：

代码语言：javascript
复制
body {
    counter-reset: report 1 page 0 ;
}

td.footer:after {
    counter-increment: page;
    content: "Page " counter(page) " of Report "  counter(report);
}
.rowLabel3{
  counter-reset: page 1;  
  counter-increment: report
}

我只需更改@page并重命名

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/28693518

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档