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

print_page_tricks-1

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.

Das könnte Dich auch interessieren

git in and git more…

Code School hat ein paar interaktive Tutorials zu Git herausgebracht, alle samt kostenlos. Sehr gut um wieder rein zu kommen oder mehr darüber zu lernen: https...

Redmine Tickets auf einem Bildschirm ausspielen

Im Rahmen meines Praktikums bei den MediaFavoriten bekam ich die Aufgabe, ein Programm zu erstellen, welches aus Redmine, ein Issue-Tracking-System oder bei uns...

Welcome to the F*ckup-Zone

Jeder Mensch macht Fehler. Jedoch reden nur die Wenigsten darüber. Das ist ja auch peinlich, wenn ich zugeben muss, dass ich was falsch gemacht hat. Ich hätte...