Wie drucke ich „Seite X von Y“ zuverlässig mit nativem Browser-Druck (Chrome und Firefox)? ⇐ CSS

[Anonymous]

Ich versuche, die Seitennummerierung in der Druckansicht wie folgt anzuzeigen:
Seite 1 von 10
Seite 2 von 10
Anforderungen

• Funktioniert im nativen Browserdruck
• Konsistentes Verhalten in Chrome / Edge (Chromium) und Firefox
• Keine serverseitige PDF-Generierung
• Bevorzugen Sie native Lösung (CSS / JS) gegenüber umfangreichen Bibliotheken

Versuch 1 – CSS-ausgelagerte Medien (

Code: Select all

@page

Randfelder)

Code: Select all

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

Erwartet
Wenn das Dokument 5 Seiten hat:

Seite 1 von 5
Seite 2 von 5
Tatsächlich
BrowserResultChrome / Edgecounter(pages) gibt immer 1 zurück → Seite 3 von 1FirefoxWorks korrekt → Seite 3 von 5
Problem: Chromium unterstützt keine Zähler(seiten).

Versuch 2 – Fußzeile mit CSS-Zählern korrigiert

Code: Select all

Code: Select all

Code: Select all

Code: Select all

@media print {

Code: Select all

  .page_footer {

Code: Select all

    position: fixed;

Code: Select all

    bottom: 10pt;

Code: Select all

    right: 25pt;

Code: Select all

  }

Code: Select all

  .page_number::after {

Code: Select all

    content: "Page " counter(page);

Code: Select all

  }

Code: Select all

}

Ergebnis
Aktuelle Seitenzahl funktioniert manchmal
Keine Möglichkeit, die Gesamtseitenzahl (Y) zu ermitteln
Inkonsistent zwischen Chrome und Firefox
Versuch 3 – Manuelle Erhöhung des CSS-Zählers

Code: Select all

@media print {

Code: Select all

  body {

Code: Select all

    counter-reset: page;

Code: Select all

  }

Code: Select all

  .page_footer {

Code: Select all

    counter-increment: page;

Code: Select all

  }

Code: Select all

  .page_number::after {

Code: Select all

    content: "Page " counter(page);

Code: Select all

  }

Code: Select all

}

Ergebnis
Seitenzahlen werden wiederholt oder übersprungen
CSS-Zähler zählen Elemente, nicht gedruckte Seiten
Unzuverlässig
Versuch 4 – JavaScript vor dem Drucken

Code: Select all

window.onbeforeprint = () => {

Code: Select all

  const totalPages = Math.ceil(

Code: Select all

    document.body.scrollHeight / window.innerHeight

Code: Select all

  );

Code: Select all

  document.querySelector(".page_number").textContent =

Code: Select all

    `Page 1 of ${totalPages}`;

Code: Select all

};

Ergebnis
JS berechnet 6 Seiten
Druckvorschau zeigt 9 Seiten
Browser-Paginierung ≠ DOM-Höhe
Zahlen falsch
Versuch 5 – Paged.js
Paged.js funktioniert korrekt in Chrome, aber:
Erfordert zusätzliche CSS-Hacks für Firefox
Erhöht die Komplexität
Kein wirklich nativer Browserdruck
Frage
Gibt es eine native Möglichkeit, Folgendes zuverlässig anzuzeigen:
Seite />Firefox ist der einzige Browser mit vollständiger CSS-Paged-Media-Unterstützung
Chromium-Browser können Seite />Windows / macOS
Nativer Browserdruck (Strg + P)
Was ich suche
Bestätigung von Browsereinschränkungen oder
Eine bewährte browserübergreifende Problemumgehung
Offizielle Spezifikationen/Browserfehler willkommen