如何使用css打印页码 [英] How to print page number using css

问题描述

我想在打印时在每个页面中打印页码。

我想通过关闭浏览器打印预览设置来实现此功能。

这是我的代码。

  .rptFooter {
 counter-reset：footerNum; 
} 
 
 .rptFooter：after {
 counter-increment：footerNum; 
 content：page（footerNum）ofcounter（footerNum）; 
} 
  

我在每一页获得

第1页，共1页

$ b

第1页，共1页

解决方案

$ b

  @page {
 counter-increment：page; 
 counter-reset：page 1; 
 @ top-right {
 content：计数器（页）的页面计数器（页面）; 
} 
} 
  

如图所示：

浏览器对CSS页面编号的支持

I want to print page number in each page when printing.

I want to acheive this with turn off browser print preview settings.

Here is my code.

.rptFooter {
    counter-reset: footerNum;
}

.rptFooter:after {
    counter-increment: footerNum;
    content: "Page " counter(footerNum) " of " counter(footerNum) ;
}   

i am getting in each page

Page 1 of 1

解决方案

Try using the default base:

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

As seen here:

Browser Support for CSS Page Numbers

这篇关于如何使用css打印页码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！