Ausgefülltes Formular einzeln ausdrucken

[nettesekel]

Wie man ein ausgefülltes Formular mittels print-Style ohne Banner und Navigationen ausdrucken kann, zeigt dieses Tutorial.

Gestern habe ich in diesem Tutorial erklärt, wie man einzelne Seitenbereiche zum Druck anbieten kann. Leider lässt sich diese Lösung nicht auf ausgefüllte Formulare anwenden, da vom dort verwendeten Script die Einträge in den Formularfeldern nicht an die Druckseite mit übergeben werden.
Deshalb stelle ich in diesem Tutorial eine weitere Möglichkeit vor, mit der man einzelne Seitenbereiche drucken lassen kann und diese eignet sich auch für den Ausdruck ausgefüllter Formulare.

Wie das Ganze in NOF aussieht, könnt ihr an folgendem Beispiel sehen und testen.
http://demos.nof-community.de/printform/index.html

In einem separaten Thread haben einige Mitglieder den Ausdruck getestet (Danke!) und da er offenbar in den gängigen Browsern gut funktioniert kann ich euch nun erklären, wie das Ganze umzusetzen ist.

[nettesekel]

------------------------------------------------------------------------------------------------------
Allgemeine Erläuterung
------------------------------------------------------------------------------------------------------

Die hier vorgestellte Lösung basiert ausschließlich auf CSS.
Im Grunde wird dem Browser mit Hilfe einer sogenannten "@media-Regel" gesagt, dass er für den Ausdruck "print" von Seiten bestimmte CSS-Anweisungen berücksichtigen soll.

Wenn wir in unserem Style eine Hintergrundgrafik für unsere Website festgelegt haben dann sieht das z.B. so aus:

Code: HTML5

1. body
2. {
3.         background-image : url( "../assets/images/background.gif" )
4. }

Diese CSS-Regel sagt dem Browser, dass die aufgerufene Website das Hintergrundbild "background.gif" als Seitenhintergrund verwenden soll.
Im Normalfall würde dieser Hintergrund auch beim Ausdruck der Website mit ausgedruckt werden.
In aller Regel interessiert sich der Seiten-Besucher bei einem Ausdruck aber nicht für den Hintergrund unserer Website, sondern für den Inhalt - sprich Text - und verbraucht so für seinen Ausdruck unötig viel Tinte.

Mit einer "@media-Regel" für den Druck "print" können wir nun für den Fall des Ausdrucks eine andere CSS-Regel hinterlegen welche die bestehende Styleangabe für den Druck der Seite ausser Kraft setzt.

Code: HTML5

1. @media print{
2. body
3. {
4.         background-image : none !important;
5. }
6.  
7. }

Der Browser erhält über diese Regel die Anweisung dass beim Drucken dieser Website die Seite kein Hintergrundbild hat. Den Zusatz "!important" habe ich speziell für den Browser "Opera" hinzugefügt, da dieser ohne diesen Zusatz die geänderte Styleangabe ignoriert und sich an der Angabe aus dem Style orientiert hat. Mit dem Zusatz "!important" ändern wir im Prinzip die Wertigkeit der CSS-Anweisungen und sagen dem Browser dass diese Anweisung Priorität hat.

Auf diese Weise können wir für den Ausdruck von Seiten einen speziellen Style angeben. So können wir z.B. auch festlegen, dass für den Druck eine einfache Schriftart (z.B. verdana) verwendet werden soll, während auf unserer Website vielleicht ein ausgefallener Google-Font verwendet wird.

Wir können aber über diese Angaben nicht nur vorhandene Sytles ändern, sondern wir können mittels CSS-Regel auch ganze Seitenelemente komplett verschwinden lassen. Dies ist besonders interessant, wenn man Banner, Navigationsleisten und andere für den Druck nicht relevante Seiten-Elemente vom Druck ausschließen möchte. Hierfür braucht es nur eine ganz unscheinbare Angabe, nämlich:

Code: HTML5

1. display:none;

Ein Website-Element das diese Styleangabe zugewiesen bekommt wird vom Browser nicht mehr angezeigt.
Nun müssen wir allerdings wissen, wie die einzelnen Elemente heißen, die dort ausgeblendet werden sollen damit wir ihnen diese CSS-Regel zuweisen können und dafür braucht es ein wenig Vorarbeit in NOF. 

[nettesekel]

-------------------------------------------------------------------------------------------------------
Vorbereitung in NOF
------------------------------------------------------------------------------------------------------

Wenn ich ein ausgefülltes Formular ohne die gestalterischen Elemente der Website drucken möchte, so muss ich die einzelnen Bereiche meiner Seite zunächst mit IDs versehen.
Die wesentlichen Bereiche einer Website, die in einem solchen Fall "verschwinden sollen" sind meist:

(1)
Der Kopfbereich der Seite, in dem sich meist ein banner/Bild und eine Navigationsleiste befinden - ich nenne diesen Bereich mal "head".

(2)
Der seitliche Berich in dem oftmals ein Untermenü und News platziert werden - ich nenne ihn "sidebar".

(3)
Und der untere Berich der Seite, in welchem sich häufig eine Textnavigation und ein Link nach oben befinden - ich nenne ihn "footer".

Ich erstelle mir also zunächste diese drei Bereiche in NOF und vergebe für jeden Bereich die entsprechende ID.

Dazu ziehe ich zunächst im Kopfbereich meiner Seite einen neuen Layoutbereich auf. Die Größe des Layoutbereichs ist abhängig von den Inhalten die ich dort platzieren möchte, denn alle Inhalte die im Kopfbereich der Seite beim Druck ausgeblendet werden sollen müssen auf diesem Layoutbereich platziert werden.

Für alle NOF-Frischlinge erläutere ich kurz das Einfügen eines Layoutbereichs. Klickt hierzu das entsprechnde Icon in eurer Symbolleiste an. Das Aussehen des Icons kann je nach NOF-Version von dem aus meinem kleinen Screenshot abweichen, allerdings sollte euch der Tooltipp - welcher sich bei Berührung der Icons mit dem Mauszeiger einblendet - verraten, wann euer Mauszeiger an der richtigen Stelle angekommen ist. Habt ihr das Icon gefunden, dann klickt es mit einem einfachen Klick an.



Im Anschluss klickt ihr dort hin, wo euer Layoutbereich erscheinen soll und zieht mit gedrückter Maustaste den Layoutbereich in der gewünschten Größe auf. Keine Angst, sowohl die Größe als auch die Platzierung können mit der Maus nachträglich korrigiert werden.

Markiert den Layoutbereich mit einem einfachen Klick in den Layoutbereich und klickt im Anschluss auf den HTML-Button auf der EP.




Es öffnet sich ein Fenster, welches wie folgt aussieht. (in älteren NOF-Versionen weicht die Ansicht von meinem Screenshot ab)




In diesem Fenster weisen wir nun unseren Layoutbereich seine ID zu. Das geschieht indem wir folgenden Code im geöffneten Fenster eingeben:

Vor dem Tag / Vorher:

Code: HTML5

1. <div id="head">

Nach dem Tag / Nachher:

Code: HTML5

1. </div>

Alles was wir später auf diesem Layoutbereich ablegen, landet in einem div-container der die ID "head" hat.


Diesen Vorhgang wiederholen wir nun auch für die Bereiche "sidebar" und "footer"... also für jeden Bereich an der gewünschten Stelle einen Layoutbereich aufziehen und die jeweilige ID vergeben.

Für den Bereich Sidebar wäre das dann der Code:

Vor dem Tag / Vorher:

Code: HTML5

1. <div id="sidebar">

Nach dem Tag / Nachher:

Code: HTML5

1. </div>

und für den Bereich Footer dieser Code:

Vor dem Tag / Vorher:

Code: HTML5

1. <div id="footer">

Nach dem Tag / Nachher:

Code: HTML5

1. </div>

Man beachte, anders als bei CSS-Klassen darf jeder ID nur einmal innerhalb einer Seite zugewiesen werden!

[nettesekel]

Wenn wir alle unsere Inhalte die nicht gedruckt werden sollen nun auf diesen/solchen Layout-Bereichen platzieren, dann können wir über die vergebenen IDs CSS-Regeln für den Druck vergeben.

Um diese drei Bereiche nicht mit ausdrucken zu lassen müssten wir also eine solche CSS-Regel erstellen:

Code: HTML5

1. #head, #sidebar, #footer {
2.   display: none;
3. }

Diese Regel sagt dem Browser, dass die Bereiche mit den IDs head, sidebar und footer beim Ausdruck der Seite nicht angezeigt werden.

Zusammen mit unserer eingangs für den body festgelegten Regel würde unsere @media-Regel nun so aussehen:

Code: HTML5

1. @media print{
2. body{
3.   background-image : none !important;
4. }
5. #head, #sidebar, #footer {
6.   display: none;
7. }
8. }

Würde ich zum jetzigen zeitpunkt die Druckvorschau aufrufen, dann würde diese bezogen auf mein Beispielprojekt nun in etwa so aussehen:



Das sieht schon ganz gut aus, denn weder Banner noch die seitliche oder untere Navigation erscheinen in der Druckvorschau, dennoch bin ich noch nicht so ganz zufrieden.
Zum einen, finde ich den Button im Ausdruck als überflüssig und möchte diesen also gern noch verschwinden lassen.  und zum anderen gefallen mir die Leerräume oben und links nicht, die die ausgeblendeten Seitenelemente hinterlassen. Ich möchte also, dass das Formular im Ausdruck nach links oben rutscht.

[nettesekel]

Nehmen wir uns zuerst den Button vor. Um auch diesen ausblenden zu könnne, müssen wir auch dem Button eine eigene ID zuweisen. Dies ist relativ einfach über die Eigenschaftenpalette möglich. Wir markieren also den Button mit einem einfachen Klick und rufen danach den letzten Reiter der EP auf. Dort vergeben wir nun die ID "button".



(eigentlich sollte das so auch für Layoutbereiche funktionieren, tut es aber leider zumindest bei meinen NOF-Installationen nicht)

Um den Button nun beim Druck auszublenden, fügen wir ihn zu unserer @media-Regel hinzu:

Code: HTML5

1. @media print{
2.     body{
3.       background-image : none !important;
4.     }
5.     #head, #sidebar, #footer, #button {
6.       display: none;
7.     }
8. }

[nettesekel]

Wo wir gerade beim Button sind, zeige ich euch auch gleich, wie ihr aus eurem Formular-Button einen Druck-Button machen könnt.
Klickt wieder den Button mit einem einfachen Klick an, so dass er markiert ist. Klickt nun den HTML-Button auf dem ersten Reiter der Eigenschaftenpalette an und gebt im sich öffnenden Fenster - im Tag/innen - folgenden Code ein:

Code: Javascript

1. onClick="javascript:window.print()"

[nettesekel]

Kommen wir nun noch zu den Leerräumen links und oben in der Druckvorschau.
Um diese Leerräume auch noch verschwinden zu lassen, müssen wir zunächst auch für den zu druckenden Bereich eine ID vergeben. Das heißt im Falle meines Beispielprojekts, dass ich auch für das Formular einen Layoutbereich aufziehe und diesem eine eigene ID zuweise. In meinem Beispiel habe ich mich für die ID "layout" entschieden.
Auf diesem Layoutbereich platziere ich nun alle Elemente die gedruckt werden sollen.

Geht also wie in den anderen Besipielen vor und verwendet für diesen Layoutbereich den folgenden Code:

Vor dem Tag / Vorher:

Code: HTML5

1. <div id="layout">

Nach dem Tag / Nachher:

Code: HTML5

1. </div>

Nachdem dieser Layoutbereich nun auch eine ID hat, können wir auch ihn mit einer CSS-Regel ansprechen und seine Formatierung für den Druck optimieren. Die CSS Regel für den Layoutbereich meines Beispielprojekts würde nun so aussehen:

Code: HTML5

1. #layout {
2.   position:relative;
3.   width:570px;
4.   margin-left:-150px;
5.   margin-top:-60px;
6. }

Erläuterung zur CSS-Regel: Während man mit einem positiven margin-Wert für einen Abstand sorgt, kann man mit einem negativen margin-Wert einen Abstand verringern. Wir wollen die Abstände oben und links verringern und zwar genau um die Höhe/Breite der Layoutbereiche die dort platziert sind.
Das bedeutet, -150px bei margin-left entsprechen der Breite des Layoutbereichs "sidebar" (=150px) und die -60px bei margin-top entsprechen der Höhe des Layoutbereichs "head" (=60px).

Da sich der IE mit negativen margin-Werten schwer tut, benötigen wir zusätzlich die Angaben position: relative; und width:570px;
wobei diese 570px der Breite des Layoutbereichs "layout" entsprechen.

Ihr müsst diese Werte also an die Gegebenheiten eurer Projekte anpassen.


Zusammen mit unseren voraberstellten CSS-Regeln sieht unsere @media-Regel nun also so aus:

Code: HTML5

1. @media print{
2.     body{
3.       background-image : none !important;
4.     }
5.     #head, #sidebar, #footer, #button {
6.       display: none;
7.     }
8.     #layout {
9.       position:relative;
10.       width:570px;
11.       margin-left:-150px;
12.       margin-top:-60px;
13.     }
14. }

Diese Regel fügen wir nun als Styleangabe zwischen den head-Tags der zu druckenden Seite ein:

Code: HTML5

1. <style type="text/css">
2.     @media print{
3.         body{
4.           background-image : none !important;
5.         }
6.         #head, #sidebar, #footer, #button {
7.           display: none;
8.         }
9.         #layout {
10.           position:relative;
11.           width:570px;
12.           margin-left:-150px;
13.           margin-top:-60px;
14.         }
15.     }
16. </style>

[nettesekel]

Da man dieses Tutorial nicht nur für den Druck ausgefüllter Formulare verwenden kann... habe ich versucht, die einzelnen Schritte etwas ausführlicher zu erläutern, damit man diese Anleitung ggf. auf die eigenen Bedürfnisse und Vorhaben abwandeln/anwenden kann.

Ich wünsche viel Erfolg!