web-dev-qa-db-fra.com

Imprimer les numéros de page sur les pages lors de l'impression html

J'ai lu beaucoup de sites Web sur l'impression des numéros de page, mais je ne pouvais toujours pas le faire afficher pour ma page html lorsque je tentais de l'imprimer.
Donc le code CSS est le suivant:

@page {
  margin: 10%;

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

J'ai essayé de mettre cette règle de page à l'intérieur 

@media all {
    *CSS code*
}

Et en dehors de cela, essayé de le mettre dans @media print, mais rien ne m'a aidé à afficher les numéros de page sur ma page. J'ai essayé d'utiliser FireFox et Chrome (basé sur WebKit, comme vous le savez). Je pense que le problème est dans mon code HTML ou CSS.
Quelqu'un pourrait-il me montrer un exemple d'implémentation de cette règle @page dans la grande page html comportant plusieurs pages? J'ai juste besoin du code de la page HTML et du code du fichier CSS, cela fonctionne. 
P.S. J'ai les dernières versions prises en charge des navigateurs.

htmlcssprinting-web-page
48
Donvino

Comme @page avec pagenumbers ne fonctionne pas dans les navigateurs, je cherchais des alternatives.
J'ai trouvé un answer posté par Oliver Kohll.
Je vais le republier ici pour que tout le monde puisse le trouver plus facilement:
Pour cette réponse, nous n'utilisons pas @page, qui est une réponse CSS pure, mais fonctionnons dans les versions de FireFox 20+. Voici le link d'un exemple.
Le CSS est:

#content {
    display: table;
}

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

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

Et le code HTML est:

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

De cette façon, vous pouvez personnaliser le numéro de votre page en modifiant les paramètres sur #pageFooter. Mon exemple:

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

Cette astuce a bien fonctionné pour moi. J'espère que cela vous aidera.

46
Donvino

Pouvez-vous essayer ceci, vous pouvez utiliser content: counter(page); 

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

Réf: http://www.w3.org/TR/CSS21/generate.html#counters

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

10
Krish R

Voici ce que vous voulez: 

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