Druckfunktion für einzelne Seitenbereiche erstellen

[nettesekel]

***Quelle***

Wie man bestimmte Seitenbereiche einer Website zum Ausdrucken bereitstellen kann, möchte ich in folgendem Tutorial kurz erklären.

Immer wieder mal taucht die Frage danach auf, wie man nur einzelne Bereiche einer Seite ausdrucken lassen kann. Der Hintergrund dieser Frage ist meist der, dass Seiteninhalte wie Banner und Navigationsleisten für einen Ausdruck nicht relevant sind und somit unnötige Platz und Tinte verbrauchen.

Wie aber stelle ich es an, dass nur der gewünschte Bereich ohne das gestalterische Drumherum gedruckt wird? Ich habe ein wenig gegoogelt und eine - wie ich meine - recht passable Lösung gefunden. Wie das Ganze in NOF aussieht und wie es funktioniert könnt ihr anhand dieses Beispielprojekts einmal testen.

(funktioniert nicht für den Ausdruck online ausgefüllter Webformulare)

[nettesekel]

Der Kern des Ganzen ist ein kleines Javascript, welches den Inhalt des Druckcontainers* nach Klick auf den Druck-Button** in einer neuen leeren Seite darstellt.

Öffnet also in NOF die Seite eurer Wahl, kopiert euch den folgenden Code und fügt ihn zwischen den Head-Tags der Seite ein. (ich würde das Layout-HTML bevorzugen sofern die Druckfunktion nicht auf jeder Seite genutzt werden soll)

Code: Javascript

1. <script type="text/javascript">
2.    var win=null;
3.    function printContainer(printContent)
4.     {
5.      win = window.open();
6.      self.focus();
7.      win.document.open();
8.      win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
9.      win.document.write('body, td { font-family: Verdana; font-size: 10pt;} h1 {font-family: Verdana; font-size: 12pt;} h2 {font-family: Verdana; font-size: 10pt;}');
10.      win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
11.      win.document.write(printContent);
12.      win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
13.      win.document.close();
14.      win.print();
15.      win.close();
16.    }
17. </script>

Das Ganze sollte in den jüngeren NOF-Versionen so aussehen...

[nettesekel]

* Nun kommen wir zum Druckcontainer.

Damit unser Script "weiß", welche Inhalte der Seite gedruckt werden sollen, müssten wir diese Inhalte in dem besagten Druckcontainer platzieren. Der Druckcontainer erhält die ID "printcontainer" und kann so vom Script als zu druckender Bereich erkannt werden.

Wie aber erschaffen wir diesen Druckcontainer in NOF? Das ist recht einfach.
Wir fügen in der Arbeitsansich einen neuen Layoutbereich ein und definieren diesen als unseren Druckcontainer.

Sucht euch also in der Symbolleiste das Icon zum Einfügen eines Layoutbereichs, klickt es an und zieht im Anschluss dort, wo eure Seiteninhalte erscheinen sollen einen Layoutbereich auf.

Klickt den Layoutbereich mit einem einfachen Klick an und klickt im Anschluss den HTML-Button auf eurer EP.

Im sich öffnenden Fenster fügt ihr vor dem Tag folgenden Code ein:

Code: HTML5

1. <div id="printcontainer">

und nach dem Tag fügt ihr diesen Code ein:

Code: HTML5

1. </div>

Mit diesen zwei Einfügungen haben wir nun den Layoutbereich zu unserem Druckcontainer gemacht. Alles was wir auf diesem Layoutbereich platzieren, wird für den Ausdruck bereitgestellt.

[nettesekel]

** Im letzten Schritt befassen wir uns mit dem Druck-Button.

Der Druckbutton ist in diesem Fall kein gewöhnlicher Druckbutton, denn dieser würde die normale Druckfunktion des Browsers aufrufen und die gesamte Seite zum Ausdruck anbieten. Unser Druckbutton muss also eine spezielle Funktion erhalten, mit welcher er das eingefügte Script aufruft. Auch hierfür gibt es wieder einen Codeschnipsel.

In meinem Beispielprojekt findet ihr drei verschiedene Möglichkeiten den Druck zu starten. Ich erläutere euch alle drei Varianten und ihr entscheidet euch welche ihr für euer Projekt nutzen möchtet.

---------------------------------------------------------------------------------------------------
Variante 1 - einfacher Link zum Aufruf der Druckfunktion
---------------------------------------------------------------------------------------------------
Um die Druckfunktion mittels Link auszulösen, fügt Ihr folgenden Code ins HTML eines Textfeldes ein. Wer nicht weiß, wie das geht, findet hier eine kleine Anleitung dazu.

Code: HTML5

1. <a href="#" class="deine CSS Klasse" onclick="printContainer(document.getElementById('printcontainer').innerHTML); return false">Linktext</a>

Den Code könnt ihr wie folgt anpassen. Möchtet ihr eurem Link eine Formatvorlage zuweisen, dann könnt ihr den Namen dieser Formatvorlage an Stelle von "deine CSS Klasse" in den Code eintragen.

Der Linktext der auf eurer seite erscheinen soll muss dort eingetragen werden wo jetzt "Linktext" steht.


---------------------------------------------------------------------------------------------------
Variante 2 - Formular-Button zum Aufruf der Druckfunktion
---------------------------------------------------------------------------------------------------
Möchtet ihr statt einem Link lieber einen Formular-Button zum Aufruf der Druckfunktion nutzen dann nutzt ihr wie im vorherigen Beispiel wieder ein Textfeld. Der Code für den Button sieht wie folgt aus:

Code: HTML5

1. <form>
2. <input type="button" value="Buttontext " onclick="printContainer(document.getElementById('printcontainer').innerHTML); return false">
3. </form>

Statt "Buttontext" tragt ihr hier die gewünschte Aufschrift für euren Druck-Button ein.


---------------------------------------------------------------------------------------------------
Variante 3 - Drucker-Symbol zum Aufruf der Druckfunktion
---------------------------------------------------------------------------------------------------
Um den Druck via Drucker-Symbol auszulösen benötigt ihr zunächst eine entsprechnde Grafik. Ich habe mein Drucker-Symbol in einem Grafikprogramm einfach mit der Schriftart Wingdings 2 und der Zahl 6 erstellt und als Grafik abgespeichert.
Fügt also eure Grafik an der gewünschten Stelle ein und verlinkt diese Grafik wie folgt.

Klickt den Button "Link" auf der Eigenschaftenpalette an, trefft im sich öffnenden Fenster die Auswahl die ihr auf dem folgenden Screenshot seht und klickt dann den html-Button am unteren Fensterrand.




Es öffnet sich ein Fenster in welchem ihr den folgenden Code im Link (innen) einfügt.

Code: HTML5

1. onclick="printContainer(document.getElementById('printcontainer').innerHTML); return false"

Bestätigt die Eingabe mit OK und beendet den Prozess mit einem Klick auf den Button "Link" rechts unten im noch offenen Fenster.

Das wars auch schon, ich wünsche viel Spaß und gutes Gelingen!