Auf Knopfdruck: PDFs in Anwendungen erstellen mit HTML und CSS-Modul

In E-Government- und Geschäftsanwendungen, aber auch im Schriftverkehr gilt es, Daten automatisiert als PDF verfügbar zu machen. Wie gelingt das am besten?

In Pocket speichern vorlesen Druckansicht 28 Kommentare lesen
Aus einem Laptop wird ein Buch und Ideen sprudeln daraus hervor

(Bild: Black Jack/Shutterstock.com)

Lesezeit: 17 Min.
Von
  • Bernhard Jungwirth
Inhaltsverzeichnis

Daten automatisiert als PDF verfügbar zu machen oder PDF-Dokumente für den Schriftverkehr zu erstellen, ist eine gängige Anforderung, mit der sich die Entwickler von E-Government- und Geschäftsanwendungen konfrontiert sehen. Die Daten aus verschiedenen Datenquellen und Formaten sollen auf Knopfdruck in ein Layout, entsprechend den Designvorgaben des Unternehmens oder Auftraggebers, umgewandelt werden, und zwar integriert in ihre jeweils eingesetzte Anwendung beziehungsweise Systemumgebung.

Ein Anwendungsfeld für automatisch generierte PDF-Dokumente sind Rechnungen, Rücksendeformulare und Bestellbestätigungen im Online-Shopping. Diese Dokumente sind meistens relativ einfach aufgebaut, es gibt eine Anschrift, allgemeine Rechnungsdaten und anschließend eine tabellarische Auflistung der Produkte. Im Banken- und Versicherungswesen sind PDFs ebenfalls gefragt, denn der Kontoauszug kommt nicht mehr aus dem Automaten, sondern wird über das Online-Banking heruntergeladen. Dokumente, die im Zusammenhang mit der Coronakrise erforderlich geworden sind – wie Testzertifikate, Quarantänebescheide und Impfzertifikate mit QR-Code – lassen sich ebenfalls vielfach als PDF automatisiert erstellen und ausfertigen.

Young Professionals schreiben für Young Professionals

Dieser Beitrag ist Teil einer Artikelserie, zu der die Heise-Redaktion junge Entwickler:innen einlädt – um über aktuelle Trends, Entwicklungen und persönliche Erfahrungen zu informieren. Bist du selbst ein "Young Professional" und willst einen (ersten) Artikel schreiben? Schicke deinen Vorschlag gern an die Redaktion: developer@heise.de. Wir stehen dir beim Schreiben zur Seite.

Durch die angepassten Regeln mussten Interessierte für Veranstaltungen im Vorhinein Reservierungen oder Tickets buchen, und auch diese werden zumeist als PDF verschickt. Die geltenden Gesetze und Verordnungen stehen in vielen Ländern ebenso als PDFs zur Verfügung. Bei der Zusammenstellung einzelner Gesetze zu einer Sammlung oder allgemein bei Druckprodukten für einen Verlag werden die Anforderungen an die Typografie höher als bei einer Rechnung. Bücher sind meistens im Blocksatz gedruckt, dies erfordert eine funktionierende Silbentrennung und auch Seitenumbrüche wollen genau gesteuert werden.

Diese Aufstellung zeigt, dass PDF als Format für viele Anwendungsfälle etabliert ist. Zum Erstellen der Dokumente gibt es eine umfangreiche Liste an Werkzeugen für verschiedene Programmiersprachen und Systemumgebungen.

Die Information, mit welchem Programm ein PDF erstellt wurde, ist in den Dokumenteigenschaften zu finden. Im Beispiel der IKEA-Rechnung (s. Abb. 1) ist als Anwendung JasperReports eingetragen und die Datei selbst ist mit iText 2.1.7 erstellt. JasperReports ist ein Werkzeug für Java zum Erzeugen von Berichten und steht als Open Source zur Verfügung. Zur Gestaltung der Berichte gibt es mit Jaspersoft Studio einen WYSIWYG-Editor (What you see is what you get).

Die Programmbibliothek iText kommt im Zusammenhang mit dem automatisierten Erstellen von PDF-Dateien häufig vor. Die Bibliothek ist Open Source und wurde lange Zeit unter der LGPL-Lizenz angeboten (GNU Lesser General Public License), daher ist iText in vielen weiteren Anwendungen zur PDF-Erstellung enthalten.

PDF-Dokumenteigenschaften einer IKEA Rechnung (Abb. 1)

Mit der Ende 2009 erschienen Version 5.0 von iText hat sich die Lizenz auf AGPL (GNU Affero General Public License) geändert. Die neue Lizenzierung soll ein potenzielles Schlupfloch der allgemeinen GNU General Public License schließen: Das Verwenden einer neuen iText-Version ist nur gestattet, wenn Entwickler den eigenen Quellcode offenlegen. Das ist jedoch nicht in jedem Fall möglich und führt dazu, dass bei vielen Projekten, die nicht Open Source sind oder die keine kostenpflichtige Version verwenden, heutzutage eine veraltete iText-Bibliothek in Verwendung ist. Hiervon sind nicht nur kleine Anbieter betroffen. Unter anderem Amazon beschreitet den knausrigen Weg veralteter Software: In den Dokumenteigenschaften der PDFs aktueller Amazon-Geschenkgutscheine ist zu lesen, dass die Gutscheine mit iText 2.0.8 erstellt werden – einer Version der Bibliothek aus dem Jahr 2008.

Neben iText ist in vielen Dokumenten auch Apache FOP (Formatting Objects Processor) eingetragen. Dabei handelt es sich um die XML-Anwendung XSL-FO (Formatting Objects), und mit Apache FOP vom XML Graphics Project gibt es eine Open-Source-Software zum Erstellen von Dokumenten. Diese Formatierungssprache eignet sich zur seitenformatierten Anordnung von Elementen für den Druck als Ausgabeformat und wurde im W3C entwickelt, aber die Weiterentwicklung am Standard ist seit 2013 eingestellt. Als Nachfolger gilt die CSS Paged Media Technologie, auf welche nachfolgend detailliert eingegangen wird. Durch die Verbreitung von XML als Austauschformat bei Geschäftsanwendungen ließen sich damit die Daten über XSLT (Extensible Stylesheet Language Transformation) in Druckdaten umwandeln. Eine Übersicht zu der Sprache und ihrer Anwendung ist auf der Website Data2Type zu finden.

Im Java-Umfeld gibt es mit Apache PDFBox eine Open-Source-Bibliothek zum Erstellen und Bearbeiten von PDF-Dokumenten. Die Steuerung des Layouts erfolgt dabei mit imperativen Anweisungen als Java-Code, dadurch ist die Handhabung für das Layout nicht so einfach wie mit Auszeichnungssprachen.

Neben den genannten Werkzeugen lassen sich aber auch HTML und CSS zum Erstellen von PDFs einsetzen. Diese Technologien dominieren als Formatierungssprache das Web und können medienübergreifend auch für gedruckte und paginierte Layouts verwendet werden.

Cascading Style Sheets (CSS) ist eine Sprache zum Aufbereiten der Darstellung von HTML-Dokumenten, um eine Trennung von Inhalt und Layout zu erreichen. Die Formatierung war ursprünglich auf die Ausgabe auf Bildschirmen ausgelegt. Mit der Einführung des CSS Paged Media Moduls ist CSS für die Darstellung von Inhalten für seitennummerierte Medien erweitert. Diese Erweiterung ist ein W3C-Standard und wird laufend weiterentwickelt. Wichtige Eigenschaften, die das Modul steuert, sind die Größe und Orientierung einer Seite sowie Kopf- und Fußzeilen und die Seitennummerierung.

Die Medienbranche bezeichnet CSS Paged Media oft auch als PrintCSS, und laut einem Beitrag auf buchreport.de ist es das fehlende Glied in der automatisierten Produktionskette. Ein Verlag kann damit ein personalisiertes Produkt mit einer Auflage von einem Stück erstellen, deswegen wird diese Technik im Beitrag als disruptiv bezeichnet. Zum Thema "Books with CSS" gab es einen Vortrag beim WeAreDevelopers World Congress 2021 von Håkon Wium Lie, er veröffentlichte 1994 den ersten Vorschlag für CSS.

Damit aus einer HTML- oder XML-Datei und der zugehörigen CSS-Datei eine Webseite wird, übernimmt der Browser das Rendering. Zum Erstellen von PDF-Dateien werden eigene Render Engines benötigt. Es stehen verschiedene Implementierungen bereit, sowohl kommerziell als auch Open Source und in verschiedenen Programmiersprachen.

Schematische Darstellung der Render Engine (Abb. 2)

Abbildung 2 zeigt den Ablauf: Eine HTML-Datei wird zusammen mit der CSS-Datei an die Render Engine übergeben, die daraus ein PDF-Dokument erstellt.

Beispiele für kostenpflichtige Programme sind Prince und Antenna House CSS Formatter. Als Open-Source-Implementierung gibt es unter anderem Weasyprint und PagedJS. Für einfache Layouts wie eine Rechnung kommen die Open-Source-Optionen infrage, aber bei komplexeren Layouts mit laufender Kopfzeile oder Fußnoten bieten nur die kostenpflichtigen Programme den erforderlichen Funktionsumfang an.

Da die Layoutanweisungen durch das CSS Paged Media Module standardisiert sind, ist es möglich, die eingesetzten Renderer zu wechseln – wie bei einem Wechsel zwischen Browsern. Allerdings gibt es auch einige herstellerspezifische Erweiterungen, die ihre Nutzer mit der Zeit an einen bestimmten Hersteller binden.

Die Seite PrintCSS Rocks bietet eine Auflistung der unterstützten Features der verschiedenen Programme.

Die Regel @page definiert eine Seite und legt damit die Eigenschaften des Dokuments für den Druck fest. Sie kann allgemein gelten oder über einen Bezeichner beziehungsweise Pseudoklassen nur für bestimmte Seiten zur Anwendung kommen. Über die Eigenschaft size lassen sich das Format und die Ausrichtung der Seite steuern, vordefinierte Formate wie DIN-A4 verwenden oder ein individuelles Format mit Breite und Höhe, beispielsweise für Gutscheine, festlegen. Eine Seite basiert wie HTML-Inhalte für das Web ebenfalls auf dem Boxmodell und margin kann den Rand festlegen, ebenso lassen sich der Innenabstand (padding) und ein Rahmen (border) setzen. Wie bereits erwähnt gibt es auch Pseudoklassen, und mit :left und :right ist ein unterschiedliches Layout für die rechte und linke Seite definierbar (Listing 1).

@page {
    size: A4 portrait;
    margin: 15mm;
    font-family: Arial, Helvetica, sans-serif;
    marks: crop cross;
    prince-trim: 0mm;
    prince-bleed: 0mm;
}

Listing 1: Page-Einstellungen

Die vollständige Spezifikation ist beim World Wide Web Consortium nachzulesen.

Die Steuerung von Druckmarken im professionellen Druck erfolgt mit der Eigenschaft marks. Der Wert crop aktiviert den Abdruck von Schnittmarken und mit dem Wert cross lassen sich auch Crossmarks zur Ausrichtung im Druckverfahren hinzufügen.

Die Unterteilung eines HTML-Dokuments mit CSS Paged Media zur Ausgabe auf Seiten geschieht in einer "page box" – für jede Seite existiert eine eigene. Diese Seite hat von außen nach innen einen Rand (page margin), einen Rahmen (page border), einen Abstand (page padding) und den Inhalt (page area). Der Rand hat eine besondere Funktion, denn er ist für generierte Inhalte einer Seite wie die Seitennummer in der Fußzeile oder einen Titel in der Kopfzeile zuständig. Dafür gibt es eine Unterteilung in 16 Boxen, wobei wiederum jede Box einen eigenen Rand, Rahmen und Abstand sowie Inhalt besitzt. Abbildung 3 zeigt das Seitenmodell und die Bezeichner der Page Margin Boxes.

Seitenmodell mit Margin Boxes (Abb. 3)

Die Boxen lassen sich innerhalb der @page-Regel ebenfalls über eine @-Regel ansteuern. Listing 2 zeigt die CSS-Regeln einer Seite zur Anzeige einer mittigen Fußzeile mit der Seiteninformation "Seite 1 von 3". Die Seitenzahl und -anzahl ermittelt die counter-Funktion. Dieser Counter für die Seitennummerierung ist automatisch vorhanden, und zusätzlich lassen sich auch eigene Counter-Funktionen erstellen.

@page {
    ...
    @bottom-center {
        content: "Seite " counter(page) " von " counter(pages);
        font-size: 10pt;
    }
}

Listing 2: Generierter Inhalt für die Page Margin Box (Fußzeile)

Nachdem das Layout der Seite definiert ist, geht es weiter zur Aufbereitung des Inhalts.