saltos - Imprima números de página en páginas al imprimir html

salto de pagina en html para imprimir

Question

He leído muchos sitios web sobre la impresión de números de página, pero aún así no pude mostrarlo en mi página html cuando intento imprimirlo.
Entonces el código CSS es el siguiente:

@page {
  margin: 10%;

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

Intenté poner esta regla de página dentro

@media all {
    *CSS code*
}

Y fuera de eso, intenté ponerlo en @media print , pero nada me ayudó a mostrar los números de página en mi página. Intenté usar FireFox y Chrome (basado en WebKit como usted sabe). Creo que el problema está en mi código html o css.
¿Podría alguien mostrarme un ejemplo de implementación de esta regla @page en la página grande html con varias páginas? Solo necesito el código de la página html y el código del archivo css, eso funciona.
PD. Tengo las últimas versiones compatibles de navegadores.

Answer 1

¿Puedes probar esto? Puedes usar 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/

Answer 2

Como @page con pagenumbers no funciona en los navegadores, por el momento estaba buscando alternativas.
Encontré una answer publicada por Oliver Kohll .
Lo volveré a publicar aquí para que todos puedan encontrarlo más fácilmente:
Para esta respuesta, no estamos usando @page , que es una respuesta pura de CSS, pero funciona en las versiones de FireFox 20+. Aquí está el link de un ejemplo.
El CSS es:

#content {
    display: table;
}

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

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

Y el código HTML es:

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

De esta forma, puede personalizar su número de página editando parámetros en #pageFooter . Mi ejemplo:

#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);  
  }

Este truco funcionó bien para mí. Espero que te ayude.

Answer 3

Esto es lo que quieres:

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

Answer 4

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