Drucken Sie Seitenzahlen auf Seiten, wenn Sie HTML drucken

Question 1

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.

Question 2

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.

Question 3

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!

Question 4

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/

Question 5

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>

Question 6

Das ist, was du willst:

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

Question 7

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

Answer 1

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

Answer 2

Mögliches Duplikat von Seitenzahlen mit CSS / HTML

James Donnelly

Answer 3

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

Donvino

Answer 4

Versuchen Sie Folgendes: Wie nummeriere ich Druckseiten?

Leon Freire

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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

WoIIe

Answer 17

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

Answer 18

32

Dies wird von den

gängigen

Answer 19

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

samuel toh

Answer 20

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

Answer 21

1

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

Verdammter

Answer 22

3

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

Andrew Gray

Answer 23

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>

Answer 24

Funktioniert nicht für mich

Ousama

Answer 25

hi @Ousama kannst du deine vorlage geben?

madz vor

Answer 26

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

madz vor

Answer 27

-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

Answer 28

9

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

iamtoc

Answer 29

11

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

Cuddlecheek

Answer 30

2

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

chidimo

Answer 31

-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

Answer 32

2

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

user3568719

Answer 33

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

WoIIe

Answer 34

Funktioniert nicht für mich

Ousama

Drucken Sie Seitenzahlen auf Seiten, wenn Sie HTML drucken

Antworten: