使用angularjs打印时的页码

Question

您好我在angularjs上创建了一个可以打印报告的报告系统。

我可以在css中打破使用pagebreak的页面。但是我无法弄清楚如何设置页码。

Answer 1

使用CSS计数器和伪类可以实现打印页码。我已经为这个问题实现了一个简单的例子，你可以参考它：

<强> HTML

<!--page1-->
<div class="pager">
    <h1>Page 1 title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla laborum necessitatibus maiores nesciunt, blanditiis nihil error ratione quasi optio, quam, tempore. Dolore, quae nostrum labore aliquid accusantium modi beatae. Magni.lorem</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat fuga inventore magnam non, omnis temporibus excepturi, veniam hic voluptas minus autem laudantium, quis quos, ratione optio! Rerum quod, alias ipsa.</p>
</div>
<p class="page-breaker"></p>    

<!--page2-->
<div class="pager">
    <h1>Page 2 title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla laborum necessitatibus maiores nesciunt, blanditiis nihil error ratione quasi optio, quam, tempore. Dolore, quae nostrum labore aliquid accusantium modi beatae. Magni.lorem</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat fuga inventore magnam non, omnis temporibus excepturi, veniam hic voluptas minus autem laudantium, quis quos, ratione optio! Rerum quod, alias ipsa.</p>
</div>
<p class="page-breaker"></p>

<强> CSS

@media print{
    body{
        counter-reset: pageNumber;
    }
    .pager{
        min-height: 800px;
    }
    .page-breaker{
        page-break-after: always;
        text-align: center;
    }
    .page-breaker:before{
        counter-increment: pageNumber;
        content: "Page:" counter(pageNumber);
    }
}

“counter-reset”将初始化由CSS维护的变量'pageNumber'的值。 CSS规则会增加此变量（在本例中为.page-breaker：before）。这意味着增加每页分页符的页码。

<强>截图：