环境

Question

我尝试在HTML报告中使用counter（page），但没有成功。我阅读了许多有关此主题的StackOverflow页面，但从未找到有效的解决方案！

环境

Chrome（最新版本：70.0.3538.110）
Firefox（最新版本：63.0.3）

工作流程

将代码复制到HTML页面
使用Chrome / Firefox打开它
打印
在预览中，无法正确计算数字

问题？

您是否有关于此主题的解决方案（如果可能，仅使用HTML / CSS）？
2018年主要浏览器不支持当前的CSS3标准吗？
也许不是完全支持thead / pageBreak组合吗？

谢谢！

PS：请发布整个解决方案（而不是部分HTML / CSS代码）！

我的HTML演示

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>HTML CSS Page counter</title>
    <style>
    table.report-container {
        page-break-after:always;
    }
    thead.report-header {
        display:table-header-group;
    }
    tfoot.report-footer {
        display:table-footer-group;
    }
    @media print{
        @page {
          size: A4 portrait;
        }
        .pageBreak {
            page-break-before: always;
        }
        span.page-number:after {
            content: "Page " counter(page);
        }
    }
    @media screen{
        span.page-number:after {
            content: "All pages";
        }
    }
    </style>
</head>
<body>
<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
                <table border="1" width="100%">
                    <tr height="100px">
                        <td align="center" valign="middle">Header title</td>
                        <td><span class="page-number"></td>
                    </tr>
                </table>
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           <table border="1" width="100%">
                <tr height="50px">
                    <td><p>Other info</p></td>
                </tr>
            </table>
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            First page with some data.
            <div class="pageBreak"></div>
            Second page with some data.
            <div class="pageBreak"></div>
            Third page with some data.
            <div class="pageBreak"></div>
            Fourth page with some data.
            <div class="pageBreak"></div>
            </div>
          </td>
       </tr>
     </tbody>
</table>
</body>
</html>

Answer 1

并非所有浏览器都支持content:counter(page);，到目前为止，我发现仅有的浏览器是Firefox。但这不适用于您的代码示例，因为您使用的是table。具体来说，page-break-before在table中不能（不应）工作。 Chrome可以让您使用，但Firefox不能。

出于演示目的，我尝试在css中重新创建表并分页结果。

您需要将结果复制到新的.html文件中进行测试。

body {
  width: 300px;
}

#header {
  border: 1px solid;
  overflow: hidden;
}

#header>div {
  float: left;
  width: 50%;
  line-height: 100px;
  text-align: center;
}

#foot {
  border: 1px solid;
}

#header p {
  margin: 0;
}

#header #page-number {
  border-left: 1px solid;
  width: calc(50% - 1px);
}

#page-number:after {
  content: "All pages";
}

@media print {
  .pageBreak {
    page-break-before: always;
    padding-bottom: 120px;
  }
  #content {
    padding-top: 120px;
  }
  #header {
    display: block;
    position: fixed;
    top: 0pt;
    left: 0pt;
    right: 0pt;
  }
  #page-number:after {
    content: "Page " counter(page);
    counter-increment: page;
  }
  #foot {
    display: block;
    position: fixed;
    bottom: 0pt;
  }
}

<div id="header">
  <div id="header-title">
    <p>Header title</p>
  </div>
  <div id="page-number"></div>
</div>
<div id="content">
  First page with some data.
  <div class="pageBreak"></div>
  Second page with some data.
  <div class="pageBreak"></div>
  Third page with some data.
  <div class="pageBreak"></div>
  Fourth page with some data.
  <div class="pageBreak"></div>
</div>
<div id="foot">
  Other info.
</div>

HTML-如何使用thead / tfoot打印页码

环境

工作流程

问题？

1 个答案: