使用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); 
    } 
} 

“计数器复位” 将初始化值由CSS维护的变量'pageNumber'。这个变量将通过CSS规则增加（在这种情况下，.page-breaker：before）。这意味着增加每页断路器的页码。

截图：