Печать номеров страниц на страницах при печати 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-файла, который работает.
P. S. У меня последние поддерживаемые версии браузеров.

39
css html printing-web-page

4 ответов

как @page с номерами страниц не работают в браузерах, пока я искал альтернативы.
Я нашел ответ сообщение от Оливер 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: 20px;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

этот трюк отлично сработал для меня. Надеюсь, это поможет вам.

39

можете ли вы попробовать это, вы можете использовать content: counter(page); 

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

Ref:http://www.w3.org/TR/CSS21/generate.html#counters

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

11

Это то, что вы хотите: 

@page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}
3
   **@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 >**
1