Drucken Sie Seitenzahlen auf Seiten, wenn Sie HTML drucken

72

Ich habe viele Websites über das Drucken von Seitenzahlen gelesen, konnte sie jedoch nicht für meine HTML-Seite anzeigen, wenn ich versuche, sie zu drucken.
Der CSS-Code lautet also als Nächstes:

@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 @media printhabe ich versucht, es einzufügen , aber nichts hat mir geholfen, 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 @pageRegel auf der großen HTML-Seite mit mehreren Seiten zeigen? Ich brauche nur den Code der HTML-Seite und den Code der CSS-Datei, das funktioniert.
PS Ich habe die neuesten unterstützten Versionen von Browsern.

html css printing-web-page

— Donvino
quelle

Mögliches Duplikat von Seitenzahlen mit CSS / HTML

— James Donnelly

@ James Donnelly Nun, die Fragen sind ähnlich, aber ich habe hier eine Antwort auf meine Frage, so wie ich es getan habe.

— Donvino

Versuchen Sie Folgendes: Wie nummeriere ich Druckseiten?

— Leon Freire

Derzeit scheint die manuelle Implementierung von etwas wie Rul in dieser Frage zu funktionieren. stackoverflow.com/questions/16297619 scheint der einzig mögliche Weg zu sein ....

— phil294

63

Da @page mit Seitennummern momentan nicht in Browsern funktioniert, habe ich nach Alternativen gesucht.
Ich habe eine Antwort von Oliver Kohll gefunden .
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, sondern arbeiten in FireFox 20+ -Versionen. Hier ist der Link eines Beispiels.
Das CSS lautet:

#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 Ihre Seitenzahl 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 hat bei mir gut funktioniert. Hoffe es wird dir helfen.

— Donvino
quelle

51

Ich habe den obigen Code ausprobiert. Ich verwende Chrome 54. Es wird nur 1 Seitenzahl auf allen Seiten festgelegt (z. B. Seite 1 auf allen Seiten). Das Inkrement funktioniert nicht. Ich habe versucht, ein Gegeninkrement für verschiedene Elemente zu setzen (z. B. Seitenumbruch: vor, @Seite usw.), aber in allen Fällen wird nur 1 Seitenzahl gedruckt (z. B. Seite 1 auf allen Seiten). Jede Hilfe hier wird geschätzt.

— Sonal

12

Wenn ich das versuche, wird nur Seite 1 am Ende der letzten Seite angezeigt. Wie frustrierend, dass Sie die CSS3-Standards von 2013 nicht verwenden können; jeesh.

— Furbeenator

6

Ich vermute, es erhöht sich nie wirklich, weil es, obwohl es auf jeder Seite angezeigt wird, immer noch ein und dasselbe Element ist.

— Ytrog

2

Es scheint, dass die Unterstützung für CSS Paged Media in einigen gängigen Browsern allmählich angezeigt wird. caniuse.com/#feat=css-paged-media

— Dylan Kinnett

4

Ich gehe counter-increment: pagezum CSS-Selektor für das Element und nicht zum Pseudoelement :afterund behalte das content: counter(page)im :afterSelektor. Es funktionierte in Chrome 71, Safari 12, nicht sicher über andere Browser.

— Kansha

13

Versuchen Sie, https://www.pagedjs.org/ zu verwenden . Es füllt den Seitenzähler sowie die Kopf- / Fußzeilenfunktionalität für alle gängigen Browser aus .

@page {
  @bottom-left {
    content: counter(page) ' of ' counter(pages);
  }
}

Es ist so viel komfortabler als Alternativen wie PrinceXML, Antennahouse, WeasyPrince, PDFReactor usw.

Und es ist völlig kostenlos! Keine Preisgestaltung oder was auch immer. Es hat mir wirklich das Leben gerettet!

— WoIIe
quelle

2

Das ist fantastisch, ich habe ewig versucht, dies zum Laufen zu bringen, und DAS war das Leichteste. Ich weiß nicht, warum dies nicht weiter oben auf der Antwortliste steht! Alle anderen Dinge scheinen

— heutzutage

2

Oh wow, ich habe gerade den Skript-Link + das Beispiel-CSS hinzugefügt und es gibt mir bereits viel bessere Ergebnisse als alles, was ich zuvor versucht habe. Auf jeden Fall einen Blick wert!

— WtFudgE

Das einzige Problem ist, dass Ihre @ media-Druckstile immer angewendet werden - auch außerhalb des Druck-CSS-Kontexts. Dies ist möglicherweise nicht wünschenswert, wenn Sie eine Ansicht zum Drucken und eine andere zum regulären Anzeigen im Browser haben möchten.

— Ganondorfz

@Ganondorfz Vielleicht können Sie versuchen, pagedjs nicht für die regelmäßige Browseranzeige einzuschließen?

— WoIIe

6

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/

— Krish R.
quelle

32

Dies wird von den

— gängigen

@Krish R, Scheint, du kannst mir helfen. Schauen Sie sich das an: stackoverflow.com/questions/43950603/…

— samuel toh

4

Ich habe gerade herausgefunden, dass dies für mich funktioniert, wenn das Stylesheet über href verknüpft ist. Wenn ich einen solchen Code als Style-Tag im HTML-Header deklariere, ist dies nicht der Fall. Wirklich verdrahtet für mich, hoffe es hilft jemandem

— contmp

1

Dies funktioniert bei mir mit WeasyPrint (PDF-Generierungstool).

— Verdammter

3

Ab 2019 funktioniert dies in CSS3 immer noch nicht. Dies ist keine Lösung!

— Andrew Gray

1

Dieses Javascript fügt absolut positionierte Divs mit Seitenzahlen in der rechten unteren Ecke hinzu und funktioniert in allen Browsern.

A4-Höhe = 297 mm = 1123 Pixel (96 dpi)

<html>
    <head>
        <style type="text/css">
            @page {
              size: A4;
              margin: 0; 
            }

            body {
              margin: 0;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
          window.onload = addPageNumbers;

          function addPageNumbers() {
            var totalPages = Math.ceil(document.body.scrollHeight / 1123);  //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi, 
            for (var i = 1; i <= totalPages; i++) {
              var pageNumberDiv = document.createElement("div");
              var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
              pageNumberDiv.style.position = "absolute";
              pageNumberDiv.style.top = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
              pageNumberDiv.style.height = "16px";
              pageNumberDiv.appendChild(pageNumber);
              document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
              pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
            }
          }
        </script>
        <div id="content">
            Lorem ipsum....
        </div>
    </body>
</html>

— littlejoe
quelle

Funktioniert nicht für mich

— Ousama

hi @Ousama kannst du deine vorlage geben?

— madz vor

Wenn Sie drucken, entfernen Sie den von den Browsern hinzugefügten Standardrand.

— madz vor

-2

Das ist, was du willst:

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

— SaturnsEye
quelle

9

Zähler (Seiten) gibt für mich immer 0 zurück, irgendwelche Hinweise warum?

— iamtoc

11

Leider scheint dies derzeit in keinem größeren Browser unterstützt zu werden.

— Cuddlecheek

2

Arbeitete für mich beim Drucken von HTML-Tabellen als PDF mitWeasyPrint==0.42.2

— chidimo

-2

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

— user9663245
quelle

2

seit wann funktioniert es in browser? en.wikipedia.org/wiki/… Nach dieser Tabelle Margin boxeswerden überhaupt nicht unterstützt

— user3568719

Sie können es nach dem Einbetten von pagedjs zum Laufen bringen :)

— WoIIe

Funktioniert nicht für mich

— Ousama