Anleitung: Print-Schalter im Template

Alle Jahre kommt der Kundenwunsch, dass man die Seiten auch gut ausdrucken können soll. Meist geht es dabei um bestimmte Seiten, die als Unterlagen benötigt werden (könnten).
Hier die kleine und die große Lösung mit Code-Beispielen.

Demo-Template:  http://wbce.at/tpls/template-daklann.html

CSS oder eigene Druck-Version

Grundsätzlich gibt es 2 Ansätze  – die sich nicht ausschließen, sondern ergänzen:

  1. Per @media print {…} die CSS-Anweisungen, die speziell für den Druck gelten.
    Dafür braucht man keinen "Print"-Schalter auf der Website; jeder Browser unterstützt das – und wer öfter mal was ausdruckt, weiß auch, wie das geht.
  2. Zusätzlich eine speziell vorbereitete Druck-Version, die über einen Print-Schalter aufgerufen wird. Diese kann völlig anders gestaltet sein und sollte bereits am Bildschirm so ähnlich aussehen wie das Ergebnis.
    Hier muss man aber beachten, dass die Einschränkungen und Besonderheiten beim Druck weiterhin gelten, es wird also immer kleine Unterschiede Screen/Vorschau/Print geben.

Einschränkungen

Hintergrundfarben und -bilder werden nicht gedruckt, außer das ist dezidiert so im Browser eingestellt. Und: Nein – das lässt sich nicht aushebeln. Man kann bestenfalls den User „bitten“, den Druck von Hintergrundbildern einzuschalten, was aber wohl die wenigsten tun werden.

Tricks

Da Header und Logos oft als Hintergrundbild eingebunden sind, verschwinden diese also beim Ausdruck. Abhilfe schafft ein eigener Printheader; ein eigens vorbereitetes Bild mit allem nötigen drauf, oder sogar ein ganzer Block.

<div class="printheader"> ... </div>

Der Printheader ist normalerweise nicht sichtbar:

.printheader {width:100%; display: none;}

erst im Ausdruck wird er sichtbar:

@media print {
.header, #nav, …. {display: none;}
.printheader {display: block;}
}

Das gleiche kann man mit dem Footer machen: Normalen Footer aus- und .printfooter einblenden.

Im Weiteren beschränkt sich CSS für media print meist auf das Ausblenden von allem, was man auf Papier ohnehin nicht anklicken oder nutzen kann: das Menü, Formulare, Kommentarboxen, andere Link-Bereiche.

Eine Ausnahme bilden die Breadcrumbs, die auch auf Papier verraten, wie man zu dieser Seite gelangt. Am besten mit kompletter URL. 

Helle Schriften wird man auf schwarz stellen, sehr große Schriftgrößen etwas kleiner machen.

Das zusätzliche CSS hängt man idealerweise an das Ende der template.css. Die paar Zeilen tragen nicht auf und man hat alles beisammen.

Eigene Druck-Version

Einige der freien Templates haben einen Schalter, mit dem eine eigene Darstellung aufgerufen wird.

Über einen Parameter „print=1“ oder ähnliches wird eine print.css eingebunden - allerdings nicht mit media-query, sondern als „normales“ css, sonst würde man den Effekt ja nicht am Bildschirm sehen.

Und: Für die Ausgabe des <body> wird eine print.php includet, die deutlich sparsamer als die normale Ausgabe ist.

So geht das:

Noch im <head>

<?php
if ( isset($_GET['print']) AND $_GET['print'] == 1 ) { 
    $print = true; 
    $printlink = '';    
} else {
    $print = false;
    $ru = $_SERVER['REQUEST_URI'];
    if (strpos($ru,
 '?') > 0) {$printlink = $ru.'&amp;print=1';} else {$printlink = '?print=1';} // ? oder & 
}
?>

print.css einbinden und die Druckversion für Bots sperren:

<?php
if ($print == true) {
echo '<meta name="robots" content="noindex,
 nofollow" />
    <link rel="stylesheet" type="text/css" href="'.TEMPLATE_DIR.'/print.css"  />';
}
?>

Das Meta name=“robots“ verhindert, dass Bots die Druckversion indexieren und dadurch Duplicate Content erzeugt wird.

 

Unmittelbar nach dem <body>-Tag gib an:

<?php
if ($print == true) {
    include 'print.php';
    return; //beendet das Script hier
}
?>

Der Printbutton selbst ist:

<a class="printbutton" href="<?php echo $printlink; ?>"><img src="<?php echo TEMPLATE_DIR; ?>/img/print.png" alt="P" /></a>

In der print.php hat man freie Hand. Ich habe im Beispiel nicht den div "wrapper" genutzt, sondern einen neuen "wrapperprint", weil "wrapper" zu stark vorbelegt war und es mühsam gewesen wäre, das alles wieder rückgängig zu machen.
        

An Ende der print.php wird auch gleich der Ausdruck gestartet:

<script type="text/javascript">
    window.print(); //Beim Testen auskommentieren
</script>

Wie weit man die Optimierung treibt, hängt von der Liebe zum Detail und von der konkreten Aufgabenstellung ab.  

Zurück