Wie lautet der CSS-Code für Seitenumbrüche zum Drucken von Webseiten?

Question

Wie lautet der CSS-Code für einen Seitenumbruch beim Drucken? Oder besser noch, gibt es ein Druck-CSS-Framework wie JQuery für Webseiten-DOM-Manipulation? Ich muss Webseiten mit Kontrolle wie Adobe PDF drucken, aber ohne ein Drittanbieter-Plug-in zu verwenden. Drucke müssen präzise sein, wie zu steuern, was Pixel, die die oben auf jeder Seite schlagen, (wenn wir auf jeder Seite Header zum Beispiel setzen unser Logo wollen.

Irgendwelche Ideen?

Answer 1

page-break-before: always;

page-break-after: always;

Answer 2

können Sie versuchen, einen Seitenumbruch zu zwingen, die page-break-before or page-break-after Eigenschaften verwenden.

Pixel-perfekte Drucksteuerung wird sehr, sehr schwer zu erreichen. zum Beispiel kann jede Braue Er fügt einen Fußzeilen- und Kopfzeilenbereich hinzu, den Sie nicht beeinflussen können und den nur der Benutzer ausschalten kann. Browser ignorieren Hintergrundbilder und neigen dazu, Ränder so einzustellen, wie sie es für richtig halten.

Für einen Überblick darüber, wie HTML für den Druck stylen, können diese Smashing Magazine Artikel einige Hinweise liefern: Printing the Web: Solutions and Techniques

Answer 3

Die w3schools.com ein handliches CSS Reference hat. Da sich die meisten von uns nicht an viele ungewöhnliche CSS-Eigenschaften erinnern können, hoffe ich, dass dies für Sie nützlich ist.

Answer 4

Die Browserunterstützung für das Drucken ist bestenfalls sehr schwach. Zum Beispiel, etwas wie ein Seitenkopfbild zu arbeiten, wird ziemlich grob sein; Ich kenne keine Browser, die sogar die CSS-Deklaration "@page" unterstützen, geschweige denn die laufenden Inhaltsfunktionen von CSS3.

Das FlyingSaucer PDF-Toolkit für Java hingegen leistet eine bemerkenswerte Arbeit bei der Umwandlung von XHTML in PDFs (besonders, da es kostenlos ist). Wir verwenden es mit Freemarker, um die "Seite" zu erstellen, aber es verarbeitet Bilder, führt Text in Kopf- und Fußzeilen aus, sogar Links innerhalb von Dokumenten.

Answer 5

Sie können keine Druckgenauigkeit auf Pixelebene über einen Browser abrufen. Ihre einzige Option ist PDF oder ein ähnliches 3rd-Party-Dokumentformat. Wenn Sie jedoch nur sicherstellen möchten, dass sich ein Logo oben auf einer Seite und unten in der nächsten befindet, können Sie die Seitenumbrüche, Seitenumbrüchen-Eigenschaften verwenden

Answer 6

Ich bin mir nicht sicher was Serversprache, die Sie verwenden, aber ich hatte großen Erfolg mit wkhtmltopdf und wicked_pdf für Ruby on Rails.