HTML을 인쇄 할 때 페이지에 페이지 번호 인쇄

HTML을 인쇄 할 때 페이지에 페이지 번호 인쇄

---

페이지 번호 인쇄에 대한 많은 웹 사이트를 읽었지만 인쇄하려고 할 때 내 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 코드에 있다고 생각합니다.
누군가 @page가 여러 페이지가있는 큰 html 페이지 에서이 규칙 을 구현하는 예를 보여줄 수 있습니까? HTML 페이지 코드와 CSS 파일 코드 만 있으면됩니다.
추신 : 지원되는 최신 버전의 브라우저가 있습니다.

---

페이지 번호가있는 @page는 현재 브라우저에서 작동하지 않기 때문에 대안을 찾고있었습니다. Oliver Kohll이 게시 한 답변을
찾았 습니다 . 모든 사람이 더 쉽게 찾을 수 있도록 여기에 다시 게시하겠습니다. 이 답변 에서는 순수한 CSS 답변 인 @page를 사용하지 않고 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);  
  }

이 트릭은 나를 위해 잘 작동했습니다. 도움이되기를 바랍니다.

---

이것을 시도해 볼 수 있습니까? 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/

---

This is what you want:

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

---

   **@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 >**

ReferenceURL : https://stackoverflow.com/questions/20050939/print-page-numbers-on-pages-when-printing-html