如何为页码使用CSS计数器增量

时间：2019-06-01 00:29:18

标签： html css

我正在尝试将页码添加到html打印输出中，并遇到Counter Increment。我尝试在我的页面上使用它，但每次仅显示Page 1。帮助将不胜感激。

P.S。我已经尝试过遵循与我类似的其他解决方案，但到目前为止没有任何工作。我的情况有所不同，因为我在表头内部使用它。

.page-number{
    text-align:center;
}
thead {
    display:table-header-group;
}

@media print{
     .page-number:before{
        counter-increment: page;
        content: "Page " counter(page);
     }
   }
@media screen{
    .page-number:before {
        counter-increment: page;
        content: "Page " counter(page);
        }
     }
<table class="SetupMainTable">
  <thead>
    <tr>
       <td colspan="4">Company Name</td>
       <td colspan="5" class="right" style="font-size:25px;">Daily Time Ticket</td> 
       <td colspan="1"><div class="page-number"></div></td>
    </tr>
  </thead>
</table>

6 个答案:

答案 0 :(得分：3)

我在一篇俄语文章中找到了该代码。该代码将分页添加到每个页面：

@page:right{
  @bottom-right {
    content: counter(page);
  }
}

@page:left{
  @bottom-left {
    content: counter(page);
  }
}

下面的代码可以显示其总数，例如“ 120页中的第3页”。

@page:left{
  @bottom-left {
    content: "Page " counter(page) " of " counter(pages);
  }
}

答案 1 :(得分：2)

因此，我从来无法使它适用于我的情况。我知道其他情况下也可以使用上述答案，但是我无法仅靠前端来生成动态页码。

我从后端使用帮助，在我的情况下为PHP，并使用了名为wkhtmltopdf的插件。

这解决了我的问题，https://stackoverflow.com/a/13496899/6000966。

我能够从前端删除逻辑并将其放在后端，并让它处理动态页码。

我建议HTML页面是否正在使用来自后端的动态数据，这是一种可行的方法。

另一方面，

静态页面应该可以解决上述问题。

答案 2 :(得分：0)

将counter-reset: page;应用于包含所有页码元素的父元素。另请注意，根据您的代码片段，您似乎要使用.page-number（class），而不是#page-number（id）。 id属性在整个文档中是唯一的，而class属性可以重复相同的标识符。 

table {
  text-align: center;
  counter-reset: page;
}

.large-font {
  font-size: 25px;
}

@media screen {
  .page-number:before {
    counter-increment: page;
    content: "Page " counter(page);
  }
}
<table>
  <tr>
    <td colspan="4">Company Name</td>
    <td colspan="5" class="right large-font">Daily Time Ticket</td>
    <td colspan="1">
      <div class="page-number"></div>
    </td>
  </tr>
  <tr>
    <td colspan="4">Company Name</td>
    <td colspan="5" class="right large-font">Daily Time Ticket</td>
    <td colspan="1">
      <div class="page-number"></div>
    </td>
  </tr>
  <tr>
    <td colspan="4">Company Name</td>
    <td colspan="5" class="right large-font">Daily Time Ticket</td>
    <td colspan="1">
      <div class="page-number"></div>
    </td>
  </tr>
</table>

答案 3 :(得分：0)

Ciao

不确定您的预期输出，但是如果您尝试使用此代码段，我认为它确实可以满足您的要求[即页码递增]。该代码已从this original sample

重新改编 

body {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

h2::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Section " counter(my-sec-counter) ". ";
}

#page-number::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Page " counter(my-sec-counter) ". ";
}
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Bootstrap Tutorial</h2>
<h2>SQL Tutorial</h2>
<h2>PHP Tutorial</h2>

<tr>
  <td colspan="4">Company Name</td>
  <td colspan="5" class="right" style="font-size:25px;">Daily Time Ticket</td>
  <td colspan="1">
    <div id="page-number"></div>
  </td>
</tr>

<tr>
  <td colspan="4">Company Name</td>
  <td colspan="5" class="right" style="font-size:25px;">Daily Time Ticket</td>
  <td colspan="1">
    <div id="page-number"></div>
  </td>
</tr>

希望这对您有所帮助，并祝您有美好的一天，
安东尼诺

答案 4 :(得分：0)

首先，回答这个问题是一个很大的挑战。 其次，为什么其他示例不起作用？那是因为计数器只会在每个元素上触发。打印时，浏览器不会创建<thead>的新实例，至少不会为您的网站的源代码创建新实例。它只是简单地显示它。但是，可以通过在打印（'beforeprint'）之前更改DOM并使用Javascript重新创建打印页面来绕过此行为。现在，每个页面上都有一个新的<table>和一个新的<thead>实例。现在，计数器开始工作。打印后，此代码会自动将DOM重置为打印前的状态。用户体验保持不变。

使用const pixelHeightA4 = 1000;，您可以指定一个a4可以容纳多少像素。当我进行测试时，1000真的很接近。

使用const heightOfTHead = 160;，您可以以a4大小指定表格标题的高度。

我希望代码中的注释可以解释该过程。

//alter the dom to print the elements
window.addEventListener('beforeprint', event => {
  //specify the number of rows in the tBody per page

  //You can either hardcode this number or change it for every page with code
  var table = document.getElementsByClassName('SetupMainTable')[0];

  printTableData(table);
  table.style.display = 'none';
});

function printTableData(table) {
  //initialise the table to get the data from
  var table = table.querySelectorAll('tbody')[0];
  var tBody;
  //get the template table
  let temp = document.getElementsByTagName('template')[0];
  //get the number of element for the last page
  const pixelHeightA4 = 1000;
  const heightOfTHead = 160;
  var heightOfContent = heightOfTHead;

  for (var i = 0, row; row = table.rows[i]; i++) {
    //get the height of the current row
    var rowHeight = row.getBoundingClientRect().height;
    var nextRowHeight;
    //get the height of the next row.
    if (i + 1 == table.rows.length) {
      nextRowHeight = 0;
    } else {
      nextRowHeight = (table.rows[i + 1]).getBoundingClientRect().height;
    }

    if (heightOfContent == 160 && table.rows.length - 1 != i) {
      //if it is the first element and not the only element on the last page
      //create new tBody
      tBody = document.createElement('tbody');
      var firstEl = row.cloneNode(true);
      heightOfContent += rowHeight;
      tBody.appendChild(firstEl);
    } else if (((heightOfContent + rowHeight) < pixelHeightA4 && (heightOfContent + rowHeight + nextRowHeight) >= 1000) || table.rows.length - 1 == i) {
      //if the row still fits on the page but the next row doesn't then this is the last table row of the page.

      if (tBody == null) {
        //if there's only one element on the last page, create a new tBody
        tBody = document.createElement('tbody');
      }

      //clone the template
      var clon = temp.content.cloneNode(true);
      //clone the row to append to the tbody
      var cloneRow = row.cloneNode(true);
      //get the table element in the template
      var cloneTable = clon.querySelectorAll('table')[0];
      //append it all togehter
      tBody.appendChild(cloneRow);
      cloneTable.appendChild(tBody);
      //append the table to the page
      document.body.appendChild(clon);

      //reset the tBody
      tBody = null;
      heightOfContent = heightOfTHead;
    } else {
      //clone a row and append it to the tBody
      var cloneRow = row.cloneNode(true);
      heightOfContent += rowHeight;
      tBody.appendChild(cloneRow);
    }

    console.log(heightOfContent);
  }
}

//reset the dom to the state before print
window.addEventListener('afterprint', event => {
  var table = document.getElementsByClassName('SetupMainTable');
  table[0].style.display = 'table';
  //remove all the cloned tables
  var cloneTables = document.getElementsByClassName('templateTable');
  while (cloneTables.length > 0) {
    cloneTables[0].parentNode.removeChild(cloneTables[0]);
  }
});
@media print {
  body {
    counter-reset: page;
    color: red;
  }
  .page-number:before {
    counter-increment: page;
    content: "Page "counter(page);
  }
  table {
    break-after: page !important;
    border: 1px solid grey;
    border-collapse: collapse;
  }
  .templateTable {
    display: table;
  }
}

@media screen {
  body {
    counter-reset: page;
  }
  .page-number {
    text-align: center;
  }
  table {
    border: 1px solid grey;
    border-collapse: collapse;
  }
  thead {
    display: table-header-group;
  }
  .page-number:before {
    counter-increment: page;
    content: "Page "counter(page);
  }
  .templateTable {
    display: none;
  }
}

table td,
table th {
  border: 1px solid black;
}

table tr:first-child th {
  border-top: 0;
}

table tr:last-child td {
  border-bottom: 0;
}

table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}

table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}
<!-- Extra big table with different row seizes for demonstration purposes only -->

<body>
  <table class="SetupMainTable">
    <thead>
      <tr>
        <th colspan="4">Company Name</th>
        <th colspan="5" class="right" style="font-size:25px;">Daily Time Ticket</th>
        <th colspan="1">
          <div class="page-number"></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="5">123</td>
        <td colspan="5">abc</td>
      </tr>
      <tr>
        <td colspan="5">456</td>
        <td colspan="5">def</td>
      </tr>
      <tr>
        <td colspan="5">
          <h3>header for random dynamic height</h3>
        </td>
        <td colspan="5">ghi</td>
      </tr>
      <tr>
        <td colspan="5">101112</td>
        <td colspan="5"><img src="https://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" height="100"></td>
      </tr>
      <tr>
        <td colspan="5">131416</td>
        <td colspan="5">mno</td>
      </tr>
      <tr>
        <td colspan="5">171819</td>
        <td colspan="5">pqr</td>
      </tr>
      <tr>
        <td colspan="5"><small>small text</small></td>
        <td colspan="5">
          <h1>Big text</h1>
        </td>
      </tr>
      <tr>
        <td colspan="5">132435</td>
        <td colspan="5">vwx</td>
      </tr>
      <tr>
        <td colspan="5">1325125123</td>
        <td colspan="5">yza</td>
      </tr>
      <tr>
        <td colspan="5">xy2532351235z</td>
        <td colspan="5">bcd</td>
      </tr>
      <tr>
        <td colspan="5">12351235125</td>
        <td colspan="5">efg</td>
      </tr>
      <tr>
        <td colspan="5">1253251235</td>
        <td colspan="5">hij</td>
      </tr>
      <tr>
        <td colspan="5">2315346</td>
        <td colspan="5">klm</td>
      </tr>
      <tr>
        <td colspan="5">123</td>
        <td colspan="5">abc</td>
      </tr>
      <tr>
        <td colspan="5">456</td>
        <td colspan="5">def</td>
      </tr>
      <tr>
        <td colspan="5">
          <h3>header for random dynamic height</h3>
        </td>
        <td colspan="5">ghi</td>
      </tr>
      <tr>
        <td colspan="5">101112</td>
        <td colspan="5"><img src="https://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" height="100"></td>
      </tr>
      <tr>
        <td colspan="5">131416</td>
        <td colspan="5">mno</td>
      </tr>
      <tr>
        <td colspan="5">171819</td>
        <td colspan="5">pqr</td>
      </tr>
      <tr>
        <td colspan="5"><small>small text</small></td>
        <td colspan="5">
          <h1>Big text</h1>
        </td>
      </tr>
      <tr>
        <td colspan="5">132435</td>
        <td colspan="5">vwx</td>
      </tr>
      <tr>
        <td colspan="5">1325125123</td>
        <td colspan="5">yza</td>
      </tr>
      <tr>
        <td colspan="5">xy2532351235z</td>
        <td colspan="5">bcd</td>
      </tr>
      <tr>
        <td colspan="5">12351235125</td>
        <td colspan="5">efg</td>
      </tr>
      <tr>
        <td colspan="5">1253251235</td>
        <td colspan="5">hij</td>
      </tr>
      <tr>
        <td colspan="5">2315346</td>
        <td colspan="5">klm</td>
      </tr>
      <tr>
        <td colspan="5">123</td>
        <td colspan="5">abc</td>
      </tr>
      <tr>
        <td colspan="5">456</td>
        <td colspan="5">def</td>
      </tr>
      <tr>
        <td colspan="5">
          <h3>header for random dynamic height</h3>
        </td>
        <td colspan="5">ghi</td>
      </tr>
      <tr>
        <td colspan="5">101112</td>
        <td colspan="5"><img src="https://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" height="100"></td>
      </tr>
      <tr>
        <td colspan="5">131416</td>
        <td colspan="5">mno</td>
      </tr>
      <tr>
        <td colspan="5">171819</td>
        <td colspan="5">pqr</td>
      </tr>
      <tr>
        <td colspan="5"><small>small text</small></td>
        <td colspan="5">
          <h1>Big text</h1>
        </td>
      </tr>
      <tr>
        <td colspan="5">132435</td>
        <td colspan="5">vwx</td>
      </tr>
      <tr>
        <td colspan="5">1325125123</td>
        <td colspan="5">yza</td>
      </tr>
      <tr>
        <td colspan="5">xy2532351235z</td>
        <td colspan="5">bcd</td>
      </tr>
      <tr>
        <td colspan="5">12351235125</td>
        <td colspan="5">efg</td>
      </tr>
      <tr>
        <td colspan="5">1253251235</td>
        <td colspan="5">hij</td>
      </tr>
      <tr>
        <td colspan="5">2315346</td>
        <td colspan="5">klm</td>
      </tr>
      <tr>
        <td colspan="5">123</td>
        <td colspan="5">abc</td>
      </tr>
      <tr>
        <td colspan="5">456</td>
        <td colspan="5">def</td>
      </tr>
      <tr>
        <td colspan="5">
          <h3>header for random dynamic height</h3>
        </td>
        <td colspan="5">ghi</td>
      </tr>
      <tr>
        <td colspan="5">101112</td>
        <td colspan="5"><img src="https://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" height="100"></td>
      </tr>
      <tr>
        <td colspan="5">131416</td>
        <td colspan="5">mno</td>
      </tr>
      <tr>
        <td colspan="5">171819</td>
        <td colspan="5">pqr</td>
      </tr>
      <tr>
        <td colspan="5"><small>small text</small></td>
        <td colspan="5">
          <h1>Big text</h1>
        </td>
      </tr>
      <tr>
        <td colspan="5">132435</td>
        <td colspan="5">vwx</td>
      </tr>
      <tr>
        <td colspan="5">1325125123</td>
        <td colspan="5">yza</td>
      </tr>
      <tr>
        <td colspan="5">xy2532351235z</td>
        <td colspan="5">bcd</td>
      </tr>
      <tr>
        <td colspan="5">12351235125</td>
        <td colspan="5">efg</td>
      </tr>
      <tr>
        <td colspan="5">1253251235</td>
        <td colspan="5">hij</td>
      </tr>
      <tr>
        <td colspan="5">2315346</td>
        <td colspan="5">klm</td>
      </tr>

    </tbody>
  </table>
  <template id="tables">
      <table class="SetupMainTable templateTable">
        <thead>
          <tr>
            <th colspan="4">Company Name</th>
            <th colspan="5" class="right" style="font-size:25px;">Daily Time Ticket</th>
            <th colspan="1">
              <div class="page-number"></div>
            </th>
          </tr>
        </thead>
      </table>
    </template>
</body>

希望这会有所帮助，否则请发表评论！

Edit1：

它会根据每个<tr>的行高自动计算可容纳一个a4的行数。

您可以here（在chrome上测试过）进行测试

答案 5 :(得分：0)

[更新后的答案]

尝试一下。一切正常，如您所愿

var counter = 1;
	
function printPageCounter(){
        document.title="Page "+counter+"";
        
        $("#pageNumber").append("Page Number : "+counter+"");
        window.print();
        $("#pageNumber").empty();
        counter++;
        return true;
 }

jQuery(document).bind("keyup keydown", function(e){
    if(e.ctrlKey && e.keyCode == 80){
     printPageCounter();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>
    <title>My title</title>
    </head>
    <body>
    <div id="pageNumber"></div>
    <H1>Just press ctrl + p ? Or Just press this button <H1>


<button onClick="printPageCounter();">Try it</button>

    </body>
    </html>

enter image description here

相关问题
最新问题