CSS-打印HTM时在页面上打印页码

我已经阅读了很多有关打印页码的网站,但是当我尝试打印html页时,仍然无法显示它。
接下来是CSS代码:

@page {
  margin: 10%;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

我试图把这个页面规则放进去

@media all {
    *CSS code*
}

在其外部,尝试将其放入@media print中,但没有任何帮助让我在页面上显示页码。 我尝试使用FireFox和Chrome(您知道基于WebKit的)。 我认为问题出在我的HTML或CSS代码中。
有人可以告诉我一个在具有多个页面的大html页面中实现此@page规则的示例吗? 我只需要html页面的代码和css文件的代码即可。
附言 我拥有最新支持的浏览器版本。

Donvino asked 2019-11-07T07:33:13Z
4个解决方案
53 votes

由于具有页面编号的@page暂时无法在浏览器中工作,因此我一直在寻找替代方法。
我已经找到了Oliver Kohll发布的答案。
我将其重新发布在这里,以便每个人都可以更轻松地找到它:
对于此答案,我们没有使用@page,这是纯CSS答案,但可以在FireFox 20+版本中使用。 这是一个示例链接。
CSS是:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

HTML代码是:

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>

这样,您可以通过将参数编辑到#pageFooter来自定义页码。 我的例子:

#pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0; 
    top: 100%;
    white-space: nowrap; 
    z-index: 20;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

这个技巧对我来说很好。 希望对您有帮助。

Donvino answered 2019-11-07T07:34:17Z
7 votes

你可以试试看吗,可以用content: counter(page);

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

参考:[http://www.w3.org/TR/CSS21/generate.html#counters]

[http://www.princexml.com/doc/9.0/page-numbers/]

Krish R answered 2019-11-07T07:34:54Z
1 votes

这就是你想要的:

@page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}
SaturnsEye answered 2019-11-07T07:35:19Z
0 votes
   **@page {
            margin-top:21% !important; 
            @top-left{
            content: element(header);

            }

            @bottom-left {
            content: element(footer
 }
 div.header {

            position: running(header);

            }
            div.footer {

            position: running(footer);
            border-bottom: 2px solid black;


            }
           .pagenumber:before {
            content: counter(page);
            }
            .pagecount:before {
            content: counter(pages);
            }      
 <div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;">
                <span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
            </div >**
user9663245 answered 2019-11-07T07:35:37Z
translate from https://stackoverflow.com:/questions/20050939/print-page-numbers-on-pages-when-printing-html