Ist es möglich, HTML-Seiten mit eigenen Kopf- und Fußzeilen auf jeder gedruckten Seite zu drucken?
Ich möchte den Schriftzug "UNCLASSIFIED" in Rot, Arial, Größe 16pt oben und unten auf jeder Seite anbringen. gedruckt Seite, unabhängig von ihrem Inhalt.
Zur Verdeutlichung: 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?
Wenn Sie javascipt verwenden können, lassen Sie den Client das Layout des Inhalts mithilfe von javascript erstellen, um die Elemente entsprechend dem verfügbaren Platz zu platzieren.
Sie könnten das Jquery Columnizer Plugin verwenden, um Ihre Inhalte dynamisch in Blöcken fester Größe anzuordnen und Ihre Kopf- und Fußzeilen als Teil der Rendering-Routine zu positionieren. http://welcome.totheinter.net/columnizer-jquery-plugin/
Siehe Beispiel 10 http://welcome.totheinter.net/autocolumn/sample10.html
Der Browser fügt weiterhin seine eigenen Kopf- oder Fußzeilen hinzu, wenn dies im Betriebssystem aktiviert ist. Ein konsistentes Layout über Plattformen und Browser hinweg erfordert wahrscheinlich bedingtes CSS.
Versuchen Sie dies, bei mir funktioniert es mit Chrome, Firefox und Safari. Sie erhalten Kopf- und Fußzeilen für jede Seite, ohne dass sich der Seiteninhalt überschneidet
CSS
<style>
@page {
margin: 10mm;
}
body {
font: 9pt sans-serif;
line-height: 1.3;
/* Avoid fixed header and footer to overlap page content */
margin-top: 100px;
margin-bottom: 50px;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
/* For testing */
background: yellow;
opacity: 0.5;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
font-size: 6pt;
color: #777;
/* For testing */
background: red;
opacity: 0.5;
}
/* Print progressive page numbers */
.page-number:before {
/* counter-increment: page; */
content: "Pagina " counter(page);
}
</style>HTML
<body>
<header id="header">Header</header>
<footer id="footer">footer</footer>
<div id="content">
Here your long long content...
<p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
</div>
</body>
Wenn Sie eine Template-Engine wie Asp.net Razor Engine oder Angular verwenden, Ich denke, Sie müssen Ihre Seite neu generieren und die Seite in mehrere Seiten aufteilen und dann können Sie jede Seite frei markieren und Kopf- und Fußzeilen in das Thema einfügen. Ein Beispiel könnte wie folgt aussehen:
@page {
size: A4;
margin: .9cm;
}
@media print {
body.print-paper-a4 {
width: 210mm;
height: 297mm;
}
body {
background: white;
margin: 0;
padding: 0;
}
.print-stage,
.no-print {
display: none;
}
body.print-paper.a4 .print-paper {
width: 210mm;
height: 297mm;
}
.print-paper {
page-break-after: always;
margin: 0;
padding: .8cm;
border:none;
overflow: hidden;
}
}
.print-papers {
display: block;
z-index: 2000;
margin: auto;
}
body.print-paper-a4 .print-paper {
width: 21cm;
height:27cm;
}
.print-paper {
margin: auto;
background: white;
border: 1px dotted black;
box-sizing: border-box;
margin: 1cm auto;
padding: .8cm;
overflow: hidden;
}
body.print-mode .no-print-preview {
display: none;
}
body.print-mode .print-preview {
display: block;
}
<body class="print-mode print-paper-a4">
<div class="print-papers print-preview">
<div class="print-paper">
<div style="font-size: 5cm">
HELLO
</div>
</div>
<div class="print-paper">
<div class="page-header">
</div>
</div>
<div class="print-paper">
</div>
</div>
</body>
Ich habe eine Lösung gefunden. Die Grundidee ist es, eine Tabelle zu machen und in thead Abschnitt platzieren Sie die Daten der Kopfzeile in tr und durch css Kraft zu zeigen, dass tr nur im Druck nicht im Bildschirm dann Ihre normale Kopfzeile sollte Kraft, nur im Bildschirm nicht im Druck zu zeigen sein. 100% arbeiten auf vielen Seiten drucken. Beispielcode ist hier
<style>
@media screen {
.only_print{
display:none;
}
}
@media print {
.no-print {
display: none !important;
}
}
TABLE{border-collapse: collapse;}
TH, TD {border:1px solid grey;}
</style>
<div class="no-print"> <!-- This is header for screen and will not be printed -->
<div>COMPANY NAME FOR SCREEN</div>
<div>DESCRIPTION FOR SCREEN</div>
</div>
<table>
<thead>
<tr class="only_print"> <!-- This is header for print and will not be shown on screen -->
<td colspan="100" style="border: 0px;">
<div>COMPANY NAME FOR PRINT</div>
<div>DESCRIPTION FOR PRINT</div>
</td>
</tr>
<!-- From here Actual Data of table start -->
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</tbody>
</table>
Möchten Sie dieses Dokument nur ausdrucken? Sie könnten es auf jeder Seite Ihrer Website einfügen und das Tag per CSS als nur für den Druck bestimmtes Medium definieren.
Dies könnte zum Beispiel eine Beispielkopfzeile sein:
<span class="printspan">UNCLASSIFIED</span>Und in Ihrem CSS, tun Sie etwas wie dieses:
<style type="text/css" media="screen">
.printspan
{
display: none;
}
</style>
<style type="text/css" media="print">
.printspan
{
display: inline;
font-family: Arial, sans-serif;
font-size: 16 pt;
color: red;
}
</style>Um den Header/Footer auf jeder Seite einzubinden, können Sie serverseitige Includes verwenden oder, wenn Sie Seiten mit PHP oder ASP generieren, können Sie ihn einfach in eine gemeinsame Datei codieren.
Editar:
Diese Antwort soll eine Möglichkeit bieten, etwas auf der physischen gedruckten Version eines Dokuments anzuzeigen, während es sonst nicht angezeigt wird. Wie in den Kommentaren angedeutet, löst sie jedoch nicht das Problem, dass eine Fußzeile auf mehreren gedruckten Seiten erscheint, wenn der Inhalt überläuft.
Ich lasse ihn hier, falls er dennoch hilfreich ist.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
