Drucken von Seitenzahlen auf den Seiten beim drucken html -

Ich habe gelesen, eine Menge von web-sites über das drucken von Seitenzahlen, aber trotzdem konnte ich es nicht machen, Anzeige für meine html-Seite, wenn ich versuche, es zu drucken.
Damit der CSS-code neben:

@page {
  margin: 10%;

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

Habe ich versucht, diese Seite der Regel innerhalb

@media all {
    *CSS code*
}

Und außerhalb von ihm, versucht, es in @media print, aber nichts hat mir geholfen, um die Seite anzuzeigen zahlen auf meiner Seite. Ich habe versucht, mit FireFox und Chrome(basierend auf WebKit, wie Sie wissen). Ich denke, das problem ist in meinem html-oder css-code.
Könnte jemand mir zeigen, ein Beispiel für die Umsetzung dieser @page Regel in der großen html-Seite mit mehreren Seiten? Ich brauche nur den code der html-Seite und den code der css-Datei, die funktioniert.
P. S. ich habe die neuesten unterstützten Versionen der Browser.

mögliche Duplikate von Seitenzahlen mit CSS/HTML
Donnelly Sowie die Fragen sind anderes, aber ich habe hier eine Antwort für meine Frage, wie ich es gemacht habe.
Versuchen Sie dies: Anzahl Seiten drucken?
derzeit manuell implementieren so etwas wie Rul scheint zu tun, in dieser Frage stackoverflow.com/questions/16297619 scheint der einzige gangbare Weg....

InformationsquelleAutor Donvino | 2013-11-18

  1. 47

    Als @Seite mit pagenumbers arbeiten nicht im Browser denn nun war ich auf der Suche nach alternativen.

    Habe ich ein Antwort geschrieben von Oliver Kohll.

    Ich werde umbuchen es hier, damit jeder es finden konnte leichter:

    Für diese Antwort sind wir nicht mit @page, das ist eine Reine CSS-Lösung, jedoch funktioniert im FireFox 20+ Versionen. Hier ist die link ein Beispiel.

    Die CSS ist:

    #content {
    display: table;
}

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

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

    Und der HTML-code ist:

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

    Diese Weise können Sie Ihre Seitenzahl durch Bearbeiten der Parameter auf #pageFooter. 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);  
  }

    Diesem trick arbeitete für mich in Ordnung. Hoffe es wird Euch helfen.

    dies scheint nicht zu funktionieren, in IE11. Der counter wird niemals inkrementiert.
    Ich habe versucht den obigen code. Bin mit Chrom-54. Es stellt nur die 1 Seite Anzahl durch alle Seiten (zB. Seite 1 auf allen Seiten). Die Schrittweite nicht funktioniert. Ich habe versucht, counter-increment für die verschiedenen Elemente (zB. page-break:before, @Seite, etc), jedoch in allen Fällen, es druckt nur 1 Seite Zahl (zB. Seite 1 auf allen Seiten). Jede Hilfe wird hier dankbar sein.
    Wenn ich versuche diese, bekomme ich nur Seite 1 unten auf der letzten Seite. Wie frustrierend Sie nicht verwenden können, die CSS3-standards von 2013; jeesh.
    Ich vermute, es nie wirklich Schritten, weil, während es ist auf jeder Seite es ist immer noch ein und dasselbe element.
    Es scheint, dass die Unterstützung für CSS - " Paged Media beginnt, erscheinen in einigen gängigen Browsern. caniuse.com/#feat=css-paged-media

    InformationsquelleAutor Donvino

  2. 10

    Können Sie dies versuchen, können Sie verwenden 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/

    Diese ist nicht länger unterstützt von den wichtigsten Browsern 🙁
    Das hat noch nie funktioniert überall.
    R, Scheint Sie mir helfen können. Schau mal hier : stackoverflow.com/questions/43950603/...
    Gerade herausgefunden, dass wenn der stylesheet verknüpft ist, per href, das für mich funktioniert, wenn ich erklären den code als style-tag im html-header, es doens nicht. Wirklich verdrahtet für mich, hoffe es hilft jemand
    Dies funktioniert für mich mit WeasyPrint (PDF-Tools).

    InformationsquelleAutor Krish R

  3. 2

    Dies ist, was Sie wollen: 

    @page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}
    Zähler (- Seiten) gibt immer 0 zurück für mich, irgendwelche Hinweise, warum?
    Auf welche browser genau hast du das auf Arbeit?
    Leider scheint dies nicht zu sein, unterstützt alle wichtigen browser, wie der jetzt.
    Für mich arbeitete in drucken von html-Tabellen in pdf mit WeasyPrint==0.42.2

    InformationsquelleAutor SaturnsEye

  4. 0
       **@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 >**
    seit Wann funktioniert es in Browsern? en.wikipedia.org/wiki/... Nach dieser Tabelle Margin boxes werden überhaupt nicht unterstützt

    InformationsquelleAutor user9663245

Schreibe einen Kommentar