Ist es möglich, HTML-Seiten mit benutzerdefinierten Kopf- und Fußzeilen auf jeder gedruckten Seite zu drucken?
Ich möchte das Wort "UNCLASSIFIED" in Rot, Arial, Größe 16pt am oberen und unteren Rand jeder gedruckten Seite hinzufügen , unabhängig vom Inhalt.
Wenn das Dokument auf 5 Seiten gedruckt wurde, sollte jede Seite die benutzerdefinierte Kopf- und Fußzeile haben.
Weiß jemand, ob dies mit HTML / CSS möglich ist?
pisition: fixed
undthead tbody tfoot
Techniken haben Nachteile, daher sollten Sie sie kombinieren. Lesen Sie hier mehr .Antworten:
Wenn Sie das Element, das Sie als Fußzeile verwenden möchten, auf Position: fest und unten: 0 setzen, wird das Element beim Drucken der Seite am unteren Rand jeder gedruckten Seite wiederholt. Das gleiche würde für ein Header-Element funktionieren, setzen Sie stattdessen einfach top: 0.
Zum Beispiel:
CSS:
quelle
Ich glaube, die richtige Antwort ist, dass HTML 5 und CSS3 das Drucken von Kopf- und Fußzeilen in
print
Medien nicht unterstützen .Und während Sie es möglicherweise simulieren können mit:
Sie haben jeweils Fehler, die verhindern, dass sie die ideale allgemeine Lösung darstellen.
quelle
@footer
mitcontent:"stuff"
oder ähnlich.Ich habe gerade die bessere Hälfte meines Tages damit verbracht, eine Lösung zu finden, die tatsächlich für mich funktioniert, und dachte, ich würde teilen, was ich getan habe. Das Problem mit den oben genannten Lösungen war, dass sich alle meine Absatzelemente mit der Fußzeile überlappen würden, die ich am Ende der Seite haben wollte. Um dies zu umgehen, habe ich das folgende CSS verwendet:
Das
page-break-inside
fürp
undcontent-block
war entscheidend für mich. Jedes Mal, wenn ich einep
Gefolgschaft habeh*
, wickle ich sie beide in eine,div class = "content-block">
um sicherzustellen, dass sie zusammen bleiben und nicht brechen.Ich hoffe, dass jemand dies nützlich findet, weil ich ungefähr 3 Stunden gebraucht habe, um es herauszufinden (ich bin auch neu in CSS / HTML, also gibt es das ...)
BEARBEITEN
Auf Anfrage in den Kommentaren füge ich ein Beispiel-HTML-Dokument hinzu. Sie möchten dies in eine HTML-Datei kopieren, öffnen und dann die Seite drucken. Die Druckvorschau sollte dies zeigen. Es funktionierte in Firefox und IE auf meiner Seite, aber Chrome hat die Schrift so klein gemacht, dass sie auf eine Seite passt, sodass es dort nicht funktioniert hat.
quelle
Ich habe jahrelang nach einer Lösung gesucht und diesen Beitrag auf gefunden zum Drucken einer Fußzeile gefunden, die auf mehreren Seiten funktioniert, ohne den Seiteninhalt zu überlappen.
Meine Anforderung war IE8. Bisher habe ich festgestellt, dass dies in Chrome nicht funktioniert. [ Update ] Ab dem 1. März 2018 funktioniert es auch in Chrome
In diesem Beispiel werden Tabellen und das tfoot-Element verwendet, indem der CSS-Stil festgelegt wird:
quelle
Die magische Lösung besteht darin, wirklich alles in einen einzigen Tisch zu packen.
thead : Dies ist für den wiederholten Header.
Fuß : die wiederholte Fußzeile.
tbody : der Inhalt.
und mache ein einzelnes tr, td und setze alles in ein div
CODE ::
extra : um Überlappungen mit mehreren Seiten zu vermeiden. mögen:
Dies führt zu einem Überlauf, bei dem sich die Überschriften innerhalb der Seitenumbrüche mit dem Header überschneiden.
also >> benutze:
page-break-inside: avoid !important;
mit dieser Klassearticle
.Ich hoffe, dies gibt Ihnen das beste Ergebnis, das Sie sich wünschen.
freundliche Grüße. ;)
quelle
Fügen Sie aus dieser Frage die folgenden Stile zu einem Nur-Druck-Stylesheet hinzu. Diese Lösung funktioniert in IE und Firefox, jedoch nicht in Chrome (ab Version 21):
quelle
Verwenden Sie Seitenumbrüche , um die Stile in CSS zu definieren:
Fügen Sie dann das Markup im Dokument an den entsprechenden Stellen hinzu:
Verweise
CSS Paged Media: Seitenumbrüche
MDN: Seitenumbruch vorher
MDN: Pause vor
Mehrspaltiges Layout
XHTML Print: Zweite Ausgabe
Webkit-Fehler 5097: CSS2-Seitenumbruch funktioniert nicht
HTML-FAQ drucken: Wird das Programm CSS-Stile wie das Umbrechen von Seiten berücksichtigen?
Umgang mit Seitenumbrüchen beim Drucken einer großen HTML-Tabelle
quelle
if the document was printed onto 5 pages
should
bedeutet nichtdon't
.If
(nur ein Beispiel) Das Wortif
(nur ein Beispiel) wird vom OP verwendet, undif
(nur ein Beispiel) das OP ist nicht mehr aktiv. Ist es besser, eine bestimmte Antwort zu gebenif
(nur ein Beispiel), gibt es bereits generische Antworten undif
(nur ein Beispiel) die Sprachen (HTML / CSS) und Spezifikationen in Frage sind entworfen , um zu vermeiden indirection und simplify Dokumentation ?If
(nur ein Beispiel) Also, warum? Ansonsten warum nicht?Ich habe versucht, diesen vergeblichen Kampf zu führen, indem ich Tfoot- und CSS-Regeln kombinierte, aber es funktionierte nur unter Firefox :(. Bei Verwendung von einfachem CSS fließt der Inhalt über die Fußzeile. Bei Verwendung von Tfoot bleibt die Fußzeile auf der letzten Seite nicht gut unten Dies liegt daran, dass Tabellenfußzeilen für Tabellen und nicht für physische Seiten gedacht sind. Getestet auf Chrome 16, Opera 11, Firefox 3 & 6 und IE6.
quelle
Ein Ansatz, der nur zum Hinzufügen von Kopfzeilen zu jeder Seite funktioniert, besteht darin
<table>
, Ihren Inhalt in ein<thead>
Tag einzuschließen und dann Ihren Kopfzeileninhalt in ein Tag und Ihren Inhalt in ein<tbody>
Tag einzufügen, wie folgt :Dies funktioniert in Chrome und ist bei anderen Browsern nicht 100% sicher.
quelle
Wenn Sie Javascipt verwenden können, lassen Sie den Client den Inhalt mithilfe von Javascript auslegen, um Elemente basierend auf dem verfügbaren Speicherplatz zu platzieren.
Sie können das JQuery Columnizer-Plugin verwenden, um Ihren Inhalt dynamisch in Blöcken fester Größe anzuordnen und Ihre Kopf- und Fußzeilen als Teil der Renderroutine zu positionieren. http://welcome.totheinter.net/columnizer-jquery-plugin/
Siehe Beispiel 10 http://welcome.totheinter.net/autocolumn/sample10.html
Der Browser fügt weiterhin eigene Kopf- oder Fußzeilen hinzu, wenn dies im Betriebssystem aktiviert ist. Für ein konsistentes Layout über Plattformen und Browser hinweg ist wahrscheinlich eine bedingte CSS erforderlich.
quelle
Ich bin überrascht und unbeeindruckt, dass Chrome eine so schreckliche CSS-Druckunterstützung bietet.
Meine Aufgabe bestand darin, auf jeder Seite eine etwas andere Fußzeile anzuzeigen. Im einfachsten Fall nur ein inkrementelles Kapitel und eine Seitenzahl. In komplexeren Fällen kann mehr Text in der Fußzeile - z. B. mehrere Fußnoten - die Größe vergrößern, wodurch der Inhaltsbereich dieser Seite verkleinert und ein Teil davon auf die nächste Seite zurückgeführt wird.
CSS-Druck kann dies nicht lösen, zumindest nicht mit schlechter Browser-Unterstützung heute. Wenn CSS3 jedoch nicht mehr gedruckt wird, kann es einen Großteil des schweren Hebens erledigen:
https://jsfiddle.net/b9chris/moctxd2a/29/
SCSS:
Das Beispiel enthält etwas mehr Code, einschließlich Cat Ipsum. Das verwendete js dient jedoch nur dazu, zu demonstrieren, wie stark die Kopf- / Fußzeile variieren kann, ohne die Paginierung zu unterbrechen. Der Schlüssel besteht wirklich darin, einen Trick mit dem Spaltenboden von CSS Flexbox zu übernehmen und ihn dann auf eine Seite mit bekannter fester Höhe anzuwenden - in diesem Fall auf ein 8,5 "x 11" großes Stück US-Papier im Letter-Format mit 0,5 "Ränder verlassen
width: 7.5in
undheight: 10in
genau. Sobald dem CSS-Flex-Container die genauen Abmessungen (div.page
) mitgeteilt wurden , können Kopf- und Fußzeile leicht so erweitert und verkleinert werden, wie dies bei herkömmlicher Typografie der Fall ist.Was übrig bleibt, ist, den Inhalt der Seite zu fließen, wenn die Fußzeile beispielsweise auf 8 Fußnoten und nicht auf 3 wächst. In meinem Fall ist der Inhalt so festgelegt, dass ich mir darüber keine Sorgen machen muss, aber ich bin mir sicher, dass es einen Weg gibt es zu tun. Ein Ansatz, der mir in den Sinn kommt, besteht darin, die Kopf- und Fußzeile in Gleitkommazahlen mit 100% Breite umzuwandeln und sie dann mit Javascript zu positionieren. Der Browser behandelt die Unterbrechungen des regulären Inhaltsflusses automatisch für Sie.
quelle
Möchten Sie nur drucken? Sie können es jeder Seite Ihrer Website hinzufügen und das Tag mithilfe von CSS als Nur-Druck-Medium definieren.
Dies könnte beispielsweise ein Beispiel für einen Header sein:
Und machen Sie in Ihrem CSS Folgendes:
Um die Kopf- / Fußzeile in jede Seite aufzunehmen, die Sie möglicherweise auf serverseitigen Includes verwenden, oder wenn Seiten mit PHP oder ASP generiert werden, können Sie sie einfach in eine gemeinsame Datei codieren.
Bearbeiten:
Diese Antwort soll eine Möglichkeit bieten, etwas auf der physischen gedruckten Version eines Dokuments anzuzeigen, ohne es anderweitig anzuzeigen. Wie aus den Kommentaren hervorgeht, wird das Problem einer Fußzeile auf mehreren gedruckten Seiten nicht gelöst, wenn der Inhalt überläuft.
Ich lasse es hier, falls es trotzdem hilfreich ist.
quelle
Wenn Sie eine Vorlagen-Engine wie Asp.net Razor Engine oder Angular verwenden, müssen Sie Ihre Seite neu generieren und die Seite in mehrere Seiten aufteilen. Anschließend können Sie jede Seite frei markieren und Kopf- und Fußzeilen zum Thema hinzufügen. Ein Beispiel könnte wie folgt sein:
quelle
Ich habe eine Lösung gefunden. Die Grundidee besteht darin, eine Tabelle zu erstellen und die Daten des Headers in tr und im CSS-Bereich zu platzieren, um zu zeigen, dass tr nur im Druck und nicht auf dem Bildschirm angezeigt wird. Dann sollte Ihr normaler Header gezwungen sein, nur im Bildschirm und nicht im Druck anzuzeigen. 100% Arbeit auf vielen Seiten drucken. Beispielcode ist hier
quelle
Versuchen Sie dies, für mich funktioniert es auf Chrome, Firefox und Safari. Sie erhalten Kopf- und Fußzeilen für jede Seite, ohne den Seiteninhalt zu überlappen
CSS
HTML
quelle
Basierend auf einem Beitrag denke
position: fixed
ich , dass es für mich funktioniert.Drücken Sie Strg + P in Chrom, siehe Kopf- und Fußzeilentext auf jeder Seite. Ich hoffe es hilft
quelle