"Drucken und APEX" ist eins der am meisten und intensivsten diskutierten Themen. Die meisten Lösungsansätze drehen sich um das Generieren von PDF - und hierzu gibt es verschiedene Ansätze, die vom programmatischen Erzeugen mit PL/SQL bis hin zum Einbinden eines Druckservers gehen. Auch die APEX-Community enthält zwei Howtos zum Einbinden des Oracle BI Publishers.

• Druckfreundliche Ausgabe (PDF) mit Application Express und dem BI Publisher
• Druckfreundliche Ausgabe: Maßgeschneiderte Layouts mit dem BI Publisher

Das Erzeugen eines PDF bringt typischerweise die Notwendigkeit mit, dass die Druckseite (mit den Mitteln des Druckservers) eigens gestaltet werden muss. Der BI Publisher bringt hierfür einen eigenen Editor mit - wird dagegen eine PL/SQL Bibliothek verwendet, so muss das Layout eigens programmiert werden. Die auf der APEX-Bildschirmseite bereits vorhandenen Layouts und Inhalte können typischerweise nicht oder nur eingeschränkt wiederverwendet werden.

Daher können externe Druckserver vor allem dann Vorteile ausspielen, wenn die Druckseite bzw. das PDF signifikant anders aussehen soll als die Bildschirmseite - denn das Layout wird ja eigens neu erstellt. Auch bei einer Druckausgabe über viele Seiten hinweg bietet das Generieren von PDF Vorteile, da man gute Kontrolle über die Seitenumbrüche hat. Dem gegenüber steht auf jeden Fall ein gewisser Aufwand - schließlich muss das PDF-Layout erstellt und der Druckserver eingebunden (und ggfs. auch lizensiert) werden.

Die Druckfunktion des Browsers wird in dieser Diskussion oft vergessen. Zu Unrecht, denn wenn es darum geht, die vorhandene Bildschirmseite zu Papier zu bringen, kann man damit mehr erreichen als man denkt. Allerdings muss man auch hier etwas tun - denn der erste Druckversuch einer normalen APEX-Anwendungseite führt meist zu einem eher unbefriedigenden Ergebnis, wie die Abbildungen 1 und 2 zeigen.

Sie brauchen beim Experimentieren mit diesem Tipp übrigens nicht jede Seite wirklich auszudrucken - denn alle Browser bieten das sog. Print Preview an; damit erhalten Sie einen guten Eindruck auf die spätere Druckseite.

Die Druckausgabe enthält jede Menge Bildschirmelemente, die auf Papier nicht gebraucht werden - und schließlich dazu führen, dass die Ausgabe über zwei Seiten gehen wird. Außerdem wird das Flash-Diagramm nicht vollständig (und oft auch gar nicht) angezeigt. Dies werden wir im folgenden unter anderem mit CSS-Mitteln ändern. Denn der CSS (Cascading Style Sheets) Standard sieht auch Direktiven für die Druckausgabe vor - also Formatanweisungen, die nur für die Druckversion gültig sind.

• Mit display: none; können Navigations- und Menüelemente (bspw. die Toolbar des interaktiven Berichts) für die Druckausgabe ausgeblendet werden.
• Die Schriftart kann für die Druckausgabe geändert werden - so sind Schriftarten mit Serifen (bspw. Times New Roman) für den Ausdruck oft besser geeignet als die für den Bildschirm oft genutzten serifenlosen Typen wie Arial oder Tahoma.
• Schließlich können auch Seitenumbrüche mit CSS-Anweisungen (wenn auch nur eingeschränkt) gesteuert werden.

Daher legen wir auch gleich los. Vorher allerdings noch eine Anmerkung zu Diagrammen: Wenn Sie einen modernen Browser verwenden (Firefox, Chrome, Safari oder Internet Explorer 9), dann sollten Sie bei Diagrammen über die HTML5-Variante nachdenken - diese werden vom Browser selbst (und nicht von einem Plugin) gerendert und lassen sich daher auch problemloser ausdrucken (Abbildung 3). Voraussetzung ist allerdings die neueste APEX-Version 4.2.

Der praktische Nebeneffekt ist, dass das Diagramm danach auch auf mobilen Endgeräten ohne Flash-Unterstützung sichtbar sein wird. Wenn Sie das Patchset APEX 4.2.1 eingespielt haben, ist es darüber hinaus möglich, die Höhe und Breite des Diagramms (oder nur eines davon) leer zu lassen - APEX richtet sich dann nach dem verfügbaren Platz auf dem Bildschirm (bzw. auf der Druckseite). Ignorieren Sie die roten Sternchen, die eine Pflichteingabe vermuten lassen ...

Zuerst wollen wir die Toolbar des interaktiven Berichts für die Druckausgabe ausblenden. Dazu müssen wir wissen, wie man diese in einer CSS-Anweisung anspricht - und das gilt nicht nur für die Toolbar, sondern für jedes Bildschirmelement, welches Sie bei der Druckausgabe gesondert behandeln möchten. Nehmen Sie also bspw. das Firebug-Plugin, darin die Funktion Inspect Element und fahren Sie mit der Maus über die Toolbar (Abbildung 4).

In Abbildung 4 lässt sich erkennen, dass der DIV-Container der Toolbar das Attribut id="apexir_TOOLBAR" enthält. Damit können wir es in einer CSS-Direktive ansprechen. Navigieren Sie nun also zum Seitentemplate und fügen Sie im Bereich Header innerhalb der HTML-Tags <head> und </head> folgenden CSS-Code ein.

<style>
@media screen {

}
@media print {
  #apexir_TOOLBAR {display: none;}
}
</style>

Werden CSS-Anweisungen von einem @media print { ... } eingeschlossen, so gelten Sie nur für die Druckausgabe - dagegen sind die innerhalb von @media screen{ ... } nur auf dem Bildschirm gültig. Sie können Ihre CSS-Anweisungen also durchaus zuerst im Bildschirmbereich testen und danach in den Druckbereich übernehmen. Laden Sie die APEX-Seite nun neu und schauen Sie sich nochmals die Druckvorschau an.

Analog dazu können Sie nun auch für andere Bereiche des interaktiven Berichts vorgehen - alle lassen sich mit dem Präfix apexir_ ansprechen - allerdings müssen Sie aufpassen: Manchmal sind es CSS-Klassen (.apexir_) und machmal HTML-IDs (#apexir_).

<style>
@media screen {

}

@media print {
  #apexir_TOOLBAR {display: none;}
  .apexir_WORKSHEET_DATA tr * {
    border-bottom: 1px solid black !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
  }
  .apexir_WORKSHEET_DATA tr th div {
    font-size: 16pt !important;
    font-family: "Times New Roman", Serif !important;
    font-variant:small-caps !important;
  }
  .apexir_WORKSHEET_DATA tr td {
    font-size: 12pt !important;
    font-family: Times New Roman, Serif !important;
  }
}
</style>

Die Druckseite sieht nun schon völlig anders aus ...

Gerade bei interaktiven Berichten müssen Sie oft das Attribut !important setzen, damit die CSS-Klassen auch wirklich gezogen werden - negative Auswirkungen müssen Sie nicht befürchten, denn es geht ja allein um die Druckausgabe. Angaben zur Hintergrundfarbe werden von den meisten Browsern übrigens ignoriert - man möchte Toner am Drucker sparen, so dass man hier tatsächlich eine Einschränkung beim Layout hat.

Nun geht es an die anderen, immer noch störenden Navigationselemente wie Reiterkarten, Breadcrumbs, doie Navigationsleiste, die Developer Toolbar und andere. Hier haben wir es aber etwas leichter als beim interaktiven Bericht, da der HTML-Code durch die APEX-Templates gesteuert werden kann. Navigieren Sie also zum Seitentemplate und geben Sie den HTML-Elementen, welche Reiterkarten, Breadcrumbs oder andere beim Druck auszublendende Seitenbestandteile enthalten, die zusätzliche CSS-Klasse noprint, wie in den Abbildungen 7 und 8 dargestellt.

Achten Sie darauf, dass die Breadcrumbs nicht im Seiten-Header, sondern als Region im Seiten-Body dargestellt werden - tyischerweise in einem der Platzhalter von #REGION_POSITION_01# bis #REGION_POSITION_08#; sie müssen im Seitentemplate nachsehen. Rahmen Sie diesen einfach in einen DIV-Container mit der CSS-Klasse noprint ein. Danach müssen Sie die neue Klasse noprint lediglich im Bereich @media print hinzufügen ...

@media print {
  .noprint {display: none !important;}

  #apexir_TOOLBAR {display: none;}
:

Das Ergebnis kann sich sehen lassen ...

Jetzt fällt allerdings auf, dass der Seitentitel völlig fehlt. Auf der Bildschirmseite erkennt man ja an der Reiterkarte, auf welcher Seite man sich befindet - und die fehlt ja nun. Wir brauchen nun also einen Seitentitel, der aber nur auf der Druckseite sichtbar ist. Dazu nutzen wir erstmals den Bereich @media screen. Vorher fügen wir den Titel jedoch dem Seitentemplate hinzu. Navigieren Sie zum Seitentemplate und fügen Sie die Ausgabe des Titels wie folgt im Bereich Header ein - geben Sie dem Element sowohl die CSS-Klasse printonly als auch printtitle (Abbildung 10).

Die CSS-Klasse printonly soll nun das Gegenteil von noprint sein - Elemente, die mit dieser Klasse versehen werden, werden auf dem Bildschirm nicht dargestellt. Fügen Sie dazu folgenden CSS-Code in den Bereich @media screen ein.

@media screen {
  .printonly {display: none;}
}

Mit der CSS-Klasse printtitle wird das Aussehen des Titels in der Druckausgabe gesteuert. Deren Definition wird wiederum im Bereich @media print hinterlegt.

@media print {
  .printtitle {
    color: #cc0000;
    font-family: Times New Roman, Serif;
    font-variant:small-caps;
    font-size: 18pt;
    text-decoration: underline;
   } 
    
  .noprint {display: none;}
  :

Die Bildschirmseite sieht danach genauso aus, wie vorher - auf der Druckansicht erscheint dagegen eine zusätzliche Überschrift.

Die Druckausgabe unserer APEX-Seite unterscheidet sich nun doch erheblich von der Ausgabe auf dem Bildschirm - und hier wurden nur wenige CSS-Anweisungen verwendet. Führt man dies weiter aus, so lassen sich sicherlich Druckausgaben erzeugen, die völlig anders aussehen als die Bildschirmseite - und die vielleicht auch andere oder zusätzliche Informationen enthalten. Das alles kann durch das gezielte Ein- und Ausblenden von Regionen je nach Medium erreicht werden - und dazu kommen noch die zahlreichen CSS-Formatierungsvarianten. Selbst die (eingeschränkte) Steuerung des Seitenumbruchs ist mit den CSS-Attributen page-break-before und page-break-after möglich.

Die Möglichkeiten eines externen Druckservers hat man mit diesem Ansatz sicherlich nicht; dort werden noch wesentlich mehr Möglichkeiten angeboten. Allerdings holen die Browser auf - nimmt man die Möglichkeiten von HTML5 hinzu, welches einfache, pixelgenaue Vektorgrafiken erlaubt (die dann ebenfalls mit ausgedruckt werden können), so ergeben sich mehr Möglichkeiten als man denkt. Probieren Sie es aus.

Zurück zur Community-Seite