Es ist eigentlich ganz einfach, mit Visualforce dynamisch PDF-Dateien in Salesforce zu generieren. Auftragsdokumente, Briefe oder Rechnungen sind da nur ein paar Beispiele für die Anwendungsmöglichkeiten. Die Tücke steckt aber im Detail. Ein paar Tricks, die ich mühsam durch Googeln und Trial&Error herausgefunden habe, möchte ich hier gerne teilen.
renderAs=“pdf“
Visualforce ermöglicht es, den Output direkt als PDF zu generieren. Dafür muss man nur in der ersten Zeile das Output-Format definieren:
<apex:page renderAs="pdf" showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">Leider verhält sich der PDF-Renderer nicht exakt so wie die Ausgabe in HTML. Einige teilweise einfache Formatierungen gehen verloren oder müssen anders umgesetzt werden. Der Salesforce-Artikel zum Thema erklärt zwar, dass man CSS zur Formatierung einsetzen kann, aber dies hat seine Limitierungen. In dieser Artikelreihe gehe ich auf zwei davon ein und zeige Dir eine Lösung auf.
Hintergrundbilder einfügen
Wenn Du beispielsweise für Briefpapier ein Logo im Kopf und einen Abbinder im Fuß haben möchtest, ist ein einfacher Trick die Verwendung eines Hintergrundbildes in Dokumentengröße mit der Briefpapiervorlage, auf das Du dann den dynamischen Inhalt legen kannst.
Der PDF-Renderer von Salesforce reagiert leider nicht auf CSS-Properties wie background-size: cover. Um ein die gesamte Seite ausfüllendes Hintergrundbild maßstabsgerecht zu platzieren, kommt es auf die richtige Bildgröße an. Hier erkläre ich Dir Schritt für Schritt, wie Du eine Hintergrundgrafik für Dein PDF-Dokument hinterlegst.
In diesem Beispiel gehe ich davon aus, dass das gewünschte Format DIN A4 sein soll. Du kannst auch jede andere Größe definieren. Die Größenangaben in dieser Anleitung musst Du dann entsprechend ändern.
Schritt 1: Generiere das Hintergrundbild
- Erstelle ein Bild, dass exakt die Größe Deines gewünschten Formates hat. Bei DIN A4 ist das 21×29,7cm.
- Wichtig: Die Auflösung des Bildes muss 96dpi betragen. In dieser Auflösung werden Grafiken in PDFs von Salesforce gerendert.
- Speichere die Grafik als JPG oder PNG.
Schritt 2: Lege das Bild als Static Ressource an
- Suche im Setup nach Static und klicke auf Static Resources
- Klicke auf New
- Gibt der Ressource einen Namen, z.B: Briefpapier, wähle eine Datei aus, wähle als Cache Control Public aus.
- Klicke auf Save
Schritt 3: Definiere das Bild als Hintergrundbild
Du musst nun das Hintergrundbild nur noch in Deiner Visualforce Page hinterlegen. Dies geschieht am besten über die Style-Definitionen im Head.
<head>
<style>
@page {
size: A4;
margin:0;
background-image:url('{!URLFOR($Resource.Briefpapier)}');
background-position: top right;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 200px 65px;
position: absolute !important;
}
</style>
</head>Du kannst Direkt im Code eine Referenz auf deine Static Ressource setzen, so dass Dein Bild auch an der richtigen Stelle gefunden wird. Dies passiert mit dieser Anweisung:
background-image:url('{!URLFOR($Resource.Briefpapier)}');Der Teil Briefpapier ist dabei der Name der Static Ressource, die Du referenzieren möchtest.
Der eigentliche Trick besteht also draus, eine Hintergrunddatei in der richtigen Größe und vor allem mit der richtigen Auflösung zu erzeugen, so dass der PDF-Renderer das Bild perfekt auf die gesamte Seite legt.
In Teil 2 dieser kleinen Reihe geht es um Fettungen im Text.
