[css] Wie verwende ich HTML, um Kopf- und Fußzeilen auf jeder gedruckten Seite eines Dokuments zu drucken?


Answers

Ich glaube, die richtige Antwort ist, dass HTML 5 und CSS3 keine Unterstützung für das Drucken von Kopf- und Fußzeilen in print bieten.

Und während Sie es möglicherweise mit simulieren können:

  • Tabellen
  • feste Positionsblöcke

Sie haben jeweils Fehler, die verhindern, dass sie die ideale allgemeine Lösung darstellen.

Question

Ist es möglich, HTML-Seiten mit benutzerdefinierten Kopf- und Fußzeilen auf jeder gedruckten Seite zu drucken?

Ich würde gerne das Wort "UNCLASSIFIED" in Red, Arial, Größe 16pt am oberen und unteren Ende jeder gedruckten Seite hinzufügen, unabhängig vom Inhalt.

Um zu verdeutlichen, ob 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?




Möchten Sie nur drucken? Sie können es zu jeder Seite Ihrer Website hinzufügen und CSS verwenden, um das Tag als Druckmedium zu definieren.

Als Beispiel könnte dies ein Beispielkopf sein:

<span class="printspan">UNCLASSIFIED</span>

Und in Ihrem CSS, machen Sie so etwas:

<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>

Schließlich, um die Kopf- / Fußzeile auf jeder Seite einzuschließen, können Sie serverseitige Includes verwenden, oder wenn Sie Seiten mit PHP oder ASP generieren, können Sie sie einfach in eine gemeinsame Datei codieren.

Bearbeiten:

Diese Antwort soll eine Möglichkeit bieten, etwas auf der physisch gedruckten Version eines Dokuments anzuzeigen, ohne es anderweitig anzuzeigen. Wie Kommentare jedoch zeigen, löst es nicht das Problem einer Fußzeile auf mehreren gedruckten Seiten, wenn der Inhalt überläuft.

Ich lasse es hier für den Fall, dass es trotzdem hilfreich ist.







Verwenden Sie Seitenumbrüche , um die Stile in CSS zu definieren:

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

Fügen Sie dann das Markup im Dokument an den entsprechenden Stellen hinzu:

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

Verweise




Wenn Sie javascipt verwenden können, muss der Client den Inhalt mithilfe von Javascript erstellen, 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 mit fester Größe zu platzieren 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 immer noch seine eigenen Kopf- oder Fußzeilen hinzu, wenn dies im Betriebssystem aktiviert ist. Ein konsistentes Layout für Plattformen und Browser erfordert wahrscheinlich bedingte CSS.




Wenn Sie eine Template-Engine wie Asp.net Razor Engine oder Angular verwenden, müssen Sie Ihre Seite neu generieren und die Seite auf mehrere Seiten aufteilen. Anschließend können Sie jede Seite frei markieren und Kopf- und Fußzeile auf das Thema setzen. Ein Beispiel könnte wie folgt sein:

@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>




Related