webentwicklung-frage-antwort-db.com.de

Drucken Sie beim Drucken von HTML-Seiten Seitennummern auf Seiten

Ich habe viele Websites über das Drucken von Seitennummern gelesen, aber ich konnte sie immer noch nicht für meine HTML-Seite anzeigen, wenn ich versuche, sie zu drucken.
.__ Der CSS-Code ist also der nächste:

@page {
  margin: 10%;

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

Ich habe versucht, diese Seitenregel einzufügen 

@media all {
    *CSS code*
}

Und außerhalb davon versuchte ich es in @media print zu legen, aber nichts half mir, die Seitenzahlen auf meiner Seite anzuzeigen. Ich habe versucht, FireFox und Chrome zu verwenden (basierend auf WebKit, wie Sie wissen). Ich denke, das Problem liegt in meinem HTML- oder CSS-Code.
Könnte mir jemand ein Beispiel für die Implementierung dieser @page-Regel in der großen HTML-Seite mit mehreren Seiten zeigen? Ich brauche nur den Code der HTML-Seite und den Code der CSS-Datei, der funktioniert. 
P.S. Ich habe die neuesten unterstützten Versionen von Browsern.

48
Donvino

Da @page mit Seitennummern in Browsern derzeit nicht funktioniert, habe ich nach Alternativen gesucht.
Ich habe eine Antwort gefunden von Oliver Kohll.
Ich werde es hier erneut veröffentlichen, damit jeder es leichter finden kann:
Für diese Antwort verwenden wir nicht @page, eine reine CSS-Antwort, arbeiten aber in FireFox 20+ -Versionen. Hier ist der link eines Beispiels.
Das CSS ist:

#content {
    display: table;
}

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

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

Und der HTML-Code lautet:

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

Auf diese Weise können Sie die Seitennummer anpassen, indem Sie die Parameter in #pageFooter bearbeiten. Mein Beispiel:

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

Dieser Trick funktionierte gut für mich. Ich hoffe es wird dir helfen.

46
Donvino

Können Sie dies versuchen, können Sie content: counter(page); verwenden. 

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

10
Krish R

Das ist, was du willst: 

@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