javascript - 使用 Javascript 和 CSS 进行多页打印-6ren

javascript - 使用 Javascript 和 CSS 进行多页打印

转载作者：行者123 更新时间：2023-11-28 08:22:27

我在打印多个多页报告时遇到显示页码的问题

下面是示例 HTML 格式:

<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>

<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>

这里，当Tfoot出现在每个页面上时，它实际上并没有增加该部分。

如果这种方法是正确的，我尝试过的也是计算行数，然后在 40 行之后添加额外的行，并添加带有页码的分页符。但这在不同的报告中并不一致。

最佳答案

它是这样工作的:

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 并重命名

关于javascript - 使用 Javascript 和 CSS 进行多页打印，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28693518/

文章推荐： javascript - 规避原产地政策的方法

文章推荐： javascript - 在 JS 中哪里添加分号可以防止缩小错误？

文章推荐： Javascript 自动将 UTF 转换为 ISO-8859

文章推荐： html - 如何移动上面的第一个选项卡？

layout - SVG 多页
扩展 SVG 标准以支持多个页面(又名 pageSet)的状态如何？我看到几年前 SVG 1.2 和 SVG Print 计划慢慢停止，所以我想知道是否有人有关于 SVG future 功能的最新信
php - 多页 FPDI
我是 PHP 的新手，在插入多个页面时使用 FPDI 有点困难。我有一个包含 3 页的 .pdf 文件。我最终将第 1 页保存为第 3 页中的一个单独页面，并且与我的代码一起使用，但那是因为我的代码
jquery - 多页 jQuery 图片库
有没有支持多页的 jQuery 画廊？我的问题是，每个页面包含不同数量的图像。我正在使用 Lightbox 2，但我看不到任何方法来配置多页画廊。我可以创建 5-6 个静态 HTML 页面，一页可以包
python - 多页 scrapy 代码的最佳实践
我正在开始使用 scrapy。我的 items.py 包含: class ParkerItem(scrapy.Item): account = scrapy.Field() m = s
c# - 多页 tiff 程序空白页
我编写了一个代码来将单个 tiff 文件合并为多页 tiff。但输出最后带有空白页。如果输入文件是黑白的，但对于彩色的 .tiff 文件，代码工作正常。例如，如果我提供 100 个文件，作为输入输出，
ios - UIScrollview中的UITableView，多页&一个tableview
我对 UIScrollView 中的 UITableView 有疑问。情况是这样的: 我有一个 ListViewController，它在 UITableView 中显示一些事件。如果用户点击一个事
javascript - 多页、动态内容 JS
我想创建一个用于更改页面的按钮。我的问题是，我有一个我以前写的代码，但它不是我想要的那样工作。代码如下: function loadingPage() { $(function () {
css - 多页 CSS - 每个页面中相同元素的不同样式
我希望对 1 个页面上的元素进行样式设置，并且不影响另一个页面上的相同元素。我在每个元素上都有 class="homepage"。有更好的方法吗？为简单起见，这里是该页面上的 DIV。 h1.h
javascript - 多页 jQuery 表单未提交
这是 jQuery 代码 $("#register-form").submit(function (e) { e.preventDefault(); }).validate({ rul
javascript - 多页 jquerymobile 文档第二页上的按钮的单击事件不会触发
我的简单移动应用程序有 3 个页面，全部用 divs/data-role="page" 划分，并且位于同一文档 (.html) 中。页面加载完美，但如果我导航到第二页，按钮上的一个非常简单的单击事件将
linux - PDF 转文本(多页)
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
Python 多页 Web 仅抓取文本
我是 python 新手。我目前正在研究网络抓取。任务是抓取戴尔社区 Inspiron 问题的前 5 页。我有运行并返回我需要的信息的代码。但是，我无法仅获取文本。我当前的代码返回文本 + html。
MATLAB 多页 GUI 查询
我目前正在为我已经完成的 m.file 开发一个 GUI。 GUI 将是一个具有多个页面的页面，每个页面都是一个独立的 GUI。在主 GUI 上，用户将在具有 2 个选项的单选按钮组上进行选择。根据
c++ - Qt 多页 TIFF
我需要从我的程序中保存多页 TIFF，但它似乎是 Qt doesn't support multipage TIFF .尽管如此，我还是需要这样做。从我的程序开始执行此操作的最佳方法是什么？到目前为
javascript - Jquery 多页 html
我遇到了尝试将几个多页 html 文件与 jquery mobile 链接的问题，发现使用 ajax 时，jquery mobile 不会显示完整文档，而是第一页。我查找了问题并找到了 todd t
c# - 多页 WPF 应用程序
我是桌面应用程序开发的新手，有一个非常基本的问题。我有一个名为 MainWindow 的 WPF 窗体，我应该如何在上面设置多个页面，例如“用户管理”、“管理内容”等。我想我有以下选择: 使用多种形
java - 多页 Tiff 压缩
我看到了一些关于多页 tiff 的问题和一些关于压缩的问题，但没有(我看到的)将两者联系起来。 This question和我见过的一样近，让我非常接近，所以我希望如此。我进入了提到的 Oracle
php - 多页 session 存储在数据库中
我正在尝试建立一个简单的多页表单，使用 session 稍后存储在数据库中的多个表中。然而，我似乎遇到了问题。虽然最后一页的值被发布到数据库，但 session 变量却没有。请记住.. 我和我的项
python - 多页 Dash 应用程序
我正在尝试构建一个多页面 Dash 应用程序。当我运行以下代码时，一切正常，除了它不会路由到我的/dash_1 或/dash_2 url。想知道是否有人可以帮助我。我的结构是这样的: 破折号项目/
python-2.7 - 多页 Mechanize
search_1=raw_input('search criteria 1? ') search_2=raw_input('search criteria 2? ') br = mechanize.B

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 Javascript 和 CSS 进行多页打印