Print-Button für Webseiten

Veröffentlicht von Bastian - 22. Juni 2016

Manchmal will eben auch im digitalen Zeitalter etwas drucken. Manchmal ist das dann aber kein einfache Word-Dokument sondern eine Webseite. Aber was machen wenn man nur einen Teil davon drucken will? Umständlich versuchen den entsprechenden Teil zu markieren, der dann aber letztendlich doch nicht richtig in die Druckansicht übernommen wird? Dafür gibt es eine ganz

Am Anfang steht der Grundaufbau:

Zunächst braucht man einen einfachen Button:

<button id="printButton" class="button noprint">Diese Seite drucken</button>

Dann etwas JavaScript bzw. jQuery

$("#printButton").click(function(){
    console.log("print");
    window.print();
});

Doch was genau passiert hier eigentlich?

Wird der #printButton gedrückt so wird zunächst in der console „print“ ausgegeben. Dies wird vor allem für uns als Entwickler verwendet damit wir sehen können ob die korrekte Funktion aufgerufen wird. Dieser Eintrag kann im Live dann selbstverständlich entfernt werden. Als nächstes wird dann die Funktion window.print(); aufgerufen. Was diese Funktion macht ist sowohl simpel als auch genial. Es wird die direkt die Druckansicht des Browser geöffnet. Je nach Browser gibt es hier sogar eine Vorschau des Inhaltes oder eben nur eine einfache Auswahl des Druckers auf welchem die Seite gedruckt werden soll. Doch nun haben wir ja wieder genau den Zustand, dass alle Inhalte der Seite gedruckt werden? Das stimmt. Jedoch können wir diesen Inhalt durch einfaches CSS manipulieren. Genauso wie es über Media Queries möglich ist auf unterschiedliche Display Größen einzugehen und Elemente verschwinden zu lassen, ist es auch möglich bei der Darstellung der Druckansicht einzelne Elemente verschwinden zu lassen oder ihnen eine spezielle Größe zu zu ordnen.

Beispiel:

@media print {
    html, body {
        height: 99%;
    }
    .noprint {
        display:none;
    }
}

Indem wir innerhalb des @media print Blockes einzelne Styles definieren, werden diese genau dann beachtet sobald die Druckansicht geöffnet wird. In diesem Beispiel wollen wir, dass unser Inhalt über die ganze Seite angezeigt wird. Aber Achtung. Warum wird hier die Höhe nicht auf 100% gestellt? es kann passieren, dass Inhalte dadurch zu hoch gerendert werden. Dies verursacht dann eine zweite, komplett Leere Seite beim Ausdrucken. Dies ist sehr unschön, kann aber mit einem einfachen Trick (Höhe nur 99%) abgefangen werden. Durch die Klasse noprint können einzelne Elemente aus der Druckansicht und somit aus dem zu druckenden Inhalt entfernt / verborgen werden. Dies hat vor allem den Vorteil, dass gezielt Inhalt die es vielleicht auf der Webseite gar nicht gibt in den Ausdruck mit aufgenommen werden können oder eben auch vice versa. Möchte man dem User selbst die Möglichkeit geben welche Teile er Ausdrucken möchte kann beispielsweise über den Ausdrucken Button ein Pop-Op geöffnet werden, indem der User dann per beispielsweise CheckBox einzelne Elemente anhaken oder entfernen kann.