Druckausgabe, aber ein wenig optimaler

[mhbosch]

Hallo,

heute mal wieder ein kleiner Tipp von mir.

Wenn man den Druckoutput zB der Rechnung optimieren will, sollte man sich eine Druckdefinition CSS anschaffen. Wozu das ganze? Nun ja, je nach Papier kann es nötig sein, die Kundenadresse an die richtige Position zu setzen, oder zB das Logobild zu verschieben.

Kommen wir zum technischen Teil.
Zuerst legen wir uns eine Druckdefinition an. In diesem Beispiel die print.css im Hauptverzechnis des Templates.

Diese füllen wir mit folgenden Definitionen:

Code: CSS  [Auswählen]

* {
margin:0;
padding:0;
}


body
{
size:210mm 297mm;
font:11pt/120% Arial, serif;
background-color: white !important;
background-image: none !important;
color:black;
}

Diese beschreiben eine DIN-A4 Seite mit einer normalen Schrift. Zudem setzt sie das Druckbild auf s/w um Farbdrucker zu schonen (kann jeder für sich selbst entscheiden).

Wie binde ich nun die Definition in meinen Druckoutput?

In dem Template in /admin/print_order.html im HEAD-Bereich über

Code: PHP  [Auswählen]

<link rel="stylesheet" media="print" href="{$logo_path}../print.css">

. Dies ist der Ausdruck, den der Admin ausdruckt.
Im Verzeichnis /modules/print_order.html geht es im HEAD-bereich über

Code: PHP  [Auswählen]

<link rel="stylesheet" media="print" href="{$tpl_path}print.css">

. Das ist der Ausdruck, den der Kunde anstossen kann.

btw: Wieso ist die Variable {$tpl_path} beim Admin Ausdruck nicht gesetzt? Wer weiß es?
Daraus ergibt sich ein aufpassen bei der Benutzung zwischen {$tpl_path} und {$logo_path}.

So, kommen wir nun positionieren. Hier muß ein wenig getestet werden, da der Ausdruck vom eigenen Drucker abhängt.
Zuerst legen wir in der print_order.html einen DIV-Bereich um das zu positionierende Element.
In diesem Beispiel das LOGO:

Code: PHP  [Auswählen]

<div id="logo">
<img src="{$tpl_path}img/logo_order.png">
</div>

Um den Bereich nun genau zu positionieren, schreiben wir eine Definition in die print.css:

Code: CSS  [Auswählen]

#logo{
position:absolute;
top:1mm;
right:5mm;
}

Damit wird das LOGO am rechten oberen Rand gedruckt.

Um das gleich mit der Anschrift zu machen, also in der print_order.html folgendes eintragen:

Code: PHP  [Auswählen]

<div id="anschrift">
{$address_label_customer}
</div>
 

Und in der print.css:

Code: CSS  [Auswählen]

#anschrift{
line-height: 15px;
font-size:16px;
position:absolute;
top:40mm;
right:10mm;
}

Damit kann man nun zB das Adressfenster eines Briefes genau ansteuern, oder Klebeetiketten.
Es versteht sich natürlich von selbst, das die Positionieren und Schriftgrößen etc. angepasst werden müssen.

Wenn ihr damit testet, bedenkt bitte, das dies nur die Druckausgabe verändert. Bei einem Browser sieht man den Aufbau also nur in der Druckvorschau. Und nach jeder Änderung am besten den Templatecache leeren.

vg,

mhbosch

Linkback: https://www.modified-shop.org/forum/index.php?topic=22489.0