Seitennummerierung in printversion eines HTML Dokumentes
mbr
Seitennummerierung in printversion eines HTML Dokumentes
mbr
Matthias ApselHallo Forum,
ich habe ein - per PHP - dynamisch generiertes HTML Dokument, bei dem ich im Ausdruck unten eine Seitennummerierung in etwa nach folgendem Muster einfügen möchte:
Seite x von y
Ich bin mir bewußt, dass ich dieses Feature im Browser bereits habe (und nach Belieben ein/ausschalten kann). Ich würde die Seitennummerierung aber gerne selbst steuern. Hintergrund: in einer späteren Erweiterung sollen evtl. mehrere Dokumente zu einem HTML-Dokument zusammengefasst werden, wobei trotzdem jedes Einzeldokument seine eigene Seitennummerierung haben soll.
Ich hatte zunächst an eine Lösung mit Javascript gedacht, bin aber schon an der korrekten Ermittelung der Anzahl Seiten für ein einzelnes Dokument gescheitert. Bei meiner Suche im Netz habe ich diverse Seiten gefunden, die sich mit diesem Thema auseinandersetzen und bin dabei darauf gestoßen, dass es mit CSS funktionieren könnte. Leider hat folgender CSS-Schnipsel in meinem Druckstylesheet bei mir keinerlei Auwirkungen gehabt
@page {
@bottom {
content: "Page " counter(page) " of " counter(pages)
}
}
Ich hatte erwartet, dass ich zumindest in der Druckvorschau dann
Page x of y
sehe (die dann noch nötigen Anpassungen hätte ich mir noch zugetraut ;-)). Das Problem ist, dass ich überhaupt keinen footer text sehe (getestet in IE10 und FF24.0). Mich würde interessieren, ob mein Vorhaben überhaupt realisierbar ist. Und falls ja, mit CSS oder doch eher mit Javascript? Ich hatte sogar darüber nachgedacht, Serverseitig PDF-Dateien zu generieren... Wäre für Denkanstöße sehr dankbar.
Falls noch jemand mein Javascript Versuch interessiert (obwohl ich als Thema jetzt CSS gewählt habe, da mir schien, dass Javascript vielleicht ein Holzweg war) - leider kann ich im Moment kein passend gekürztes online Beispiel zeigen, da ich zurzeit noch alles lokal auf meinem Rechner habe.
function seitenformat()
{
var nDocId = document.getElementsByName("documentId")[0].value;
var pxPerCm = document.getElementById("test1").offsetHeight;
var oArticleTable = document.getElementsByTagName("table")[1];
var oContainer = document.getElementById("doc"+nDocId);
var nSeitenzahl = 1;
var aoTr = oArticleTable.getElementsByTagName("tr");
var i = 0;
var oEl = document.getElementById("doc"+nDocId+"_seite0");
while(oEl)
{
oEl.parentNode.removeChild(oEl);
i++;
oEl = document.getElementById("doc"+nDocId+"_seite" + i);
}
nSeitenzahl = (oContainer) ? (parseInt(oContainer.offsetHeight/(pxPerCm*24.09)) + 1) : 1;
alert("pixel pro cm:"+pxPerCm+"\ncontainer height in px:"+oContainer.offsetHeight+"\ncontainer height in cm:"+oContainer.offsetHeight/pxPerCm);
if(nSeitenzahl > 1)
{
for(i=0;i<nSeitenzahl;i++)
{
if(!document.getElementById("doc"+nDocId+"_seite" + i))
{
var oSeitenzahl = document.createElement("div");
oSeitenzahl.style.position = "absolute";
oSeitenzahl.style.width = mbr.getComputedStyle(oArticleTable, "width");
oSeitenzahl.style.textAlign = "center";
oSeitenzahl.style.top = (26.0*i+25)+"cm";
oSeitenzahl.id = "doc"+nDocId+"_seite" + i;
oSeitenzahl.innerHTML = "Seite " + (i+1) + " von " + nSeitenzahl;
oContainer.appendChild(oSeitenzahl);
}
}
}
}
Viele Grüße und vielen Dank schonmal für alle Kommentare
mbr
-
Om nah hoo pez nyeetz, mbr!
@page {
@bottom {
content: "Page " counter(page) " of " counter(pages)
}
}[Es muss "@bottom-center" heißen](http://www.w3.org/TR/css3-page/). Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Geste und Gestein](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=G#geste).  -
Hallo,
Ich würde die Seitennummerierung aber gerne selbst steuern.
Seitenzahlen sind etwas, was sich auf ein Printformat (z.B. DIN A4) bezieht. Ich glaube nicht, dass Du das Verhalten beim Druck 100% steuern kannst. Zumindest bei einem schnellen Test macht FF was völlig anderes als Chrome beim Drucken.
bin aber schon an der korrekten Ermittelung der Anzahl Seiten für ein einzelnes Dokument gescheitert.
Was nützt es Dir, wenn Du die Anzahl der Seiten bei einem Klienten ermittelst?
Meine Meinung wäre: Wenn Du die Seitennummerierung selbst steuern möchtest (was ich gut nachvollziehen kann, wenn Du mehrere Dokumente einheitlich nummerieren möchtest) geht das nur robust, wenn Du serverseitig pdf's generierst.
Dann kannst Du die Seitenzahlen voll kontrollieren. Die HTML-Seiten kannst Du ja ohne Seitenzahl angeben. Um was für ein Inhalt/Buch/etc. handelt es sich denn? Vielleicht fällt einem dann noch etwas ein...
Cheers,
Baba -
Moin!
Ich bin mir bewußt, dass ich dieses Feature im Browser bereits habe.
Vermutlich deshalb hast du in den Browsern derzeit immer noch keinerlei Support für irgendeine fortgeschrittene Art der Seitenformatierung im Druck.
Opera war von allen relevanten Browsern derjenige mit der besten Umsetzung von Print-CSS, was sich aber vermutlich seit Version 15 und dem Umstieg auf die Webkit-Engine erledigt haben dürfte.
Bringt es dir etwas, wenn nur bei 1% der User die Seitenzahlen wie gewünscht gedruckt werden?
Ich hatte erwartet, dass ich zumindest in der Druckvorschau dann
Page x of y
Wenn der Browser es supported, dann ja. Also nein.
Die PDF-Lösung ist da vermutlich der schlauere Weg. Und gute PDF-Renderer erlauben auch HTML- und CSS-Input mit genau dem von dir angedachten Print-Layout. Ich habe auf die Schnelle nur keine Erinnerung, welche Software das eventuell gewesen war.
- Sven Rautenberg
-
Hallo an alle Antwortenden,
zuerst einmal vielen Dank für eure Bemühungen. Den Tip von Matthias habe ich beherzigt, leider ohne Erfolg.
Ich habe es jetzt doch geschafft, eine Version meines "Projektes" online zu bekommen. Dort kann man das Problem besichtigenwer möchte, darf sich auch gerne das gesamte Projekt anschauen. Ein wichtiger Hinweis: beim Aufruf der "index.php" wird ein Cookie gesetzt und dieser Cookie zusammen mit der IP, dem Datum und der aufgerufenen URL (inklusive Query Parametern) in der Datenbank gespeichert. Bei (erneuten) Aufruf der "index.php" werden alle Einträge, die älter als zwei Tage sind wieder weggeworfen. Dies nur zur Info, damit niemand sagen kann, ich würde klammheimlich seine Daten speichern. Bei der oben verlinkten einzelnen Druckseite wird nichts gespeichert.
Ihr werdet sehen, dass insgesamt noch einiges zu tun ist und wahrscheinlich die Seitenformatierungen noch mein geringstes Problem sind ;-)
Mit den Daten dürft ihr ruhig rumspielen. Ist eine reine "Demo installation". Ich hoffe, ich habe keine Scheunentore offengelassen... Zum einloggen kann man den Nutzer "admin" benutzen. Passwort : "admin liebt Bratwurst".
Viele Grüße
mbr
-
Hallo mbr,
du hast ja offenbar keinen Fließtext mit browser-willkürlichen Zeilenumbrüchen.
Also könntest du die Zeilenhöhe per CSS genau einstellen und dann per PHP die Zeilen mitzählen. Du weisst dann, wann eine Seite fertig ist. Kannst ggf. noch einen Fuss drucken, etwa mit Zwischensummen.
Wo wäre das Problem?
Ein anderer Ansatz bei Fließtext: Mit Javascript kannst du die HTML-Elemente durchlaufen und ermitteln, in welcher Höhe ein Element beginnt. An entsprechenden Stellen fügst du eine Fusszeile mit Seitenumbruch ein.
Ich habe allerdings noch nicht ausprobiert, ob Javascript auch beim Drucken funktioniert.
Gast
-
Hallo Gast,
du hast ja offenbar keinen Fließtext mit browser-willkürlichen Zeilenumbrüchen.
bei dem verlinkten Dokument gibt es noch keine Zeilenumbrüche (vielleicht war das Beispiel schlecht gewählt) Wenn ich Dokumente mit vielen Positionen erzeuge, dann habe ich Zeilenumbrüche
Ein anderer Ansatz bei Fließtext: Mit Javascript kannst du die HTML-Elemente durchlaufen und ermitteln, in welcher Höhe ein Element beginnt. An entsprechenden Stellen fügst du eine Fusszeile mit Seitenumbruch ein.
Ich habe allerdings noch nicht ausprobiert, ob Javascript auch beim Drucken funktioniert.
Wie du siehst, habe ich eine solche Javascript Lösung bereits eingebaut. Bei einigen Beispieldokumenten funktionierte das gut, aber dann hatte ich ein Dokument, das der browser auf einer Seite darstellte, aber bei meiner Berechnung kamen zwei Seiten heraus und ich habe bisher den Fehler noch nicht gefunden - also da schlummert noch was ;-)
Link zu einem fehlerhaften Dokument
Das Dokument hat in der Druckvorschau 5 Seiten, aber meine JS Lösung gibt aus:
"Seite 1 von 4",
"Seite 2 von 4",
"Seite 3 von 4" und
"Seite 4 von 4"Und auf der letzten Seite gar nichts. Im FF sieht es noch schlimmer aus (nur auf der ersten Seite ein footer). Aber wie ich bereits erwähnt habe ist das nicht ganz so tragisch. Es muss zwingend nur im IE10 funktionieren - wäre aber natürlich gut, wenn ich das Problem verstehen würde und es dann doch Browser übergreifend lösen könnte.
Viele Grüße
mbr
Edit: Ich sehe gerade, dass auch einige andere "Kleinigkeiten" nicht funktionieren (so sollte im Kopf der tabelle, wo die fette "3" steht eigentlich "Angebot 3" stehen. Tut es auch, aber nur im FF! Der Seitenquelltext(!) unterscheidet sich anscheinend zwischen IE und FF - "What the heck?" - Wie bereits erwähnt: Zeilennummern sind wahrscheinlich mein kleinstes Problem....
-
-
-
Hallo Forum,
das Problem ist (zumindest für mich) gelöst. Ich habe jetzt eine Javascript Lösung, die für die beiden Testseiten das tut, was ich erwarte. Sieht zwar nicht gerade schön aus, aber solange es funktioniert... Wahrscheinlich werde ich in ein paar Wochen zu Kreuze kriechen und nochmal alles neu machen. Und am Ende wird es wohl doch auf Generierung von PDFs hinauslaufen...
Auf jeden Fall erstmal vielen Dank an alle hier im Forum, die einen Beitrag zur Lösung des Problems beigesteuert haben. Da ich mich für die Qualität der Lösung etwas schäme, erspare ich mal dem Archiv die etwa 100 Zeilen relevanten Javascript Code. wer mag, kann selbst nachschauen ;-)Viele Grüße
mbr