it-swarm.com.de

Druckt die Fußzeile der Tabelle ganz unten auf der letzten Seite

Ich verwende eine Tabelle, um auf jeder Seite eine Fußzeile zu erstellen (funktioniert in Firefox, das reicht).

Eine JS-Geige: https://jsfiddle.net/j9k2xzze/

(Klicken Sie mit der rechten Maustaste auf das Ausgabefenster -> This Frame -> Open Frame in New Tab. Die Druckvorschau funktioniert dann wie gewohnt.)

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

Auf der letzten Seite wird jedoch die Tabellenfußzeile direkt unter dem Text angezeigt. Ist der Text kürzer als die letzte Seite, bleibt die Fußzeile dran.

Ich möchte, dass die Fußzeile auf der letzten Seite ganz unten steht ... __ Die @ page-Erweiterung funktioniert leider nicht in Firefox oder ich mache es falsch:

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}
21
LeMike

Wenn Sie nur Firefox unterstützen, ist dies eigentlich ganz einfach (überspringen Sie die Bearbeitung, um eine Technik zu sehen, die auch im IE funktioniert, aber weniger vielseitig ist). Fügen Sie einfach einen großen unteren Rand am Ende Ihres Inhalts hinzu. Es muss groß genug sein, um garantiert am Ende der Seite vorbeizufahren. Der Browser geht davon aus, dass Sie am Ende Ihres Dokuments keine leere Seite drucken möchten. Es schneidet so viel Rand ab, wie Sie benötigen, um dies zu vermeiden. Halten Sie dabei die Fußzeile ganz nach unten.

Sie können den Rand auf ein Pseudo-Element setzen, um Ihren HTML-Code sauber zu halten, und Sie können @media print verwenden, um die Anzeige auf dem Bildschirm zu verhindern.

Hier ist der Code. Damit es in Firefox funktioniert, öffnen Sie this jsfiddle , klicken Sie mit der rechten Maustaste auf die Ausgabe, wählen Sie This Frame> Nur diesen Frame anzeigen aus und führen Sie eine Druckvorschau aus.

@media print {
  #content:after {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest paper size you support */
  }
}
<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>PAGE FOOTER</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td id="content">
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

Diese Technik funktioniert in keinem Browser außer Firefox. Wenn im IE ein Seitenumbruch innerhalb eines vertikalen Rands auftritt, wird der gesamte Rand entfernt. Dies ist eigentlich das richtige Verhalten gemäß W3C (Abschnitt 13.3.3) - aber keine Sorge, Das Verhalten von Firefox ist praktisch identisch, es sei denn, es gibt einen Tabellenfuß, und in diesem Fall ist es tatsächlich besser. Ich bezweifle, dass sich das ändern wird.

Chrome und die anderen Webkit-Browser (Safari, Opera) unterstützen keine sich wiederholenden Fußzeilen, daher sind sie irrelevant. Ich denke, ich habe diesen Ansatz in Edge noch nicht getestet, aber ich bin mir ziemlich sicher, dass er nicht funktionieren wird.


EDIT

Es gibt eine weitere Option, die sowohl in Firefox als auch im IE funktioniert. Alles, was Sie tun müssen, ist, die Fußzeile in einem separaten <div> zu platzieren und unten auf der Seite zu fixieren, und dann den sich wiederholenden <tfoot> als Abstandhalter verwenden. Dieser Ansatz hat jedoch einige kleinere Nachteile (Details unten).

Hier ist der Code. Damit es in Firefox funktioniert, öffnen Sie this jsfiddle , klicken Sie mit der rechten Maustaste auf die Ausgabe, wählen Sie This Frame> Nur diesen Frame anzeigen aus und führen Sie eine Druckvorschau aus. Klicken Sie im IE in den Ausgabe-Frame, drücken Sie STRG + A, führen Sie eine Druckvorschau aus, und ändern Sie "Wie auf dem Bildschirm ausgegeben" in "Wie auf dem Bildschirm ausgewählt".

@media print {
  #spacer {height: 2em;} /* height of footer + a little extra */
  #footer {
    position: fixed;
    bottom: 0;
  }
}
<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  <thead>
  <tfoot>
    <tr>
      <td id="spacer"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

<div id="footer">
  PAGE FOOTER
</div>

Die wichtigste Einschränkung dieser Methode besteht darin, dass auf jeder Seite des Druckauftrags eine identische Fußzeile eingefügt wird. Dies bedeutet, dass Sie keine Seiten mit einer anderen oder keiner Fußzeile haben können. Da die Höhe des Abstandhalters von der Höhe der Fußzeile abhängt, müssen Sie sie anpassen, wenn sich die Höhe der Fußzeile ändert.

9
DoctorDestructo

Es ist nicht möglich, die Fußzeile nur auf der letzten Seite zu verwenden, wenn Sie eine absolute oder feste Position verwenden. Wenn Sie die Fußzeile nur unten haben möchten, wenn die Seite nicht lange genug ist, verwenden Sie die Technik der klebrigen Fußzeile, die keine absolute/feste Position erfordert. Etwas wie das

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.Push {
  height: 50px;
}

Wenn Sie Fußzeilen am unteren Rand jeder Seite wirklich benötigen, würde ich empfehlen, zuerst ein PDF zu generieren und es zu drucken. Wenn Sie komplexes Material drucken müssen, werden Sie ohnehin zuerst PDF-Dateien generieren müssen.

0