stepTools Skip to content
Synesty | No Code - Low Code Integration & Automation

HTML2PDFConverter

Der Step HTML2PDFConverter kann aus HTML-Text eine PDF-Datei erstellen. 
Der Step unterstützt einige wenige HTML Tags sowie Inline CSS-Stylesheets, um das Aussehen zu beeinflussen. 

Beispiel

Folgendes Beispiel erzeugt ein klassisches Rechnungsdokument. Es kann als Grundlage für eigene Templates genommen werden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<table width="100%">
<tr>
<td style="font-size:10pt;">




ACME Company<br />
Jane Doe<br />
Main Street. 1<br />
123456 Doecity<br />
Doeland<br />
</td>


<td align="right" style="font-size:9pt;">
Foo Company<br />
Foo Street. 2a<br />
23456 Footown<br />
<small>
CEO: Foo Bar<br />
</small>
</td>
</tr>
</table>
<hr />
<h3>Invoice: 1000234 </h3>
<small>Service Invoice<br />
Invoice-Number: 1000234<br />
Customer-Nr.: 23456<br />
Invoice Date: 2020-11-20<br />
</small>
<br />
<table width="100%" style="margin-top:10mm">
    <thead style="font-size:10pt;font-weight:bold;">
        <tr>
            <th align="left" style="width:8mm">Pos</th>
            <th align="left" style="width:12mm">Qty</th>
            <th align="left" style="width:20mm">Type</th>
            <th align="left" style="width:95mm">Description</th>
            <th align="right" style="width:20mm">Amount net</th>
            <th align="right" style="width:20mm">Total net</th>
            <th align="right" style="width:20mm"></th>
        </tr>
        <tr>
            <td colspan="7" style="border-top:1px solid #000;"></td>
        </tr>
    </thead>
    <tbody style="font-size:10pt;">


        <tr>
            <td>
            1
            </td>
            <td>1</td>
            <td>Service</td>
            <td>
                <small><strong>Service</strong><br />
                Consulting about XYZ</small>
            </td>
            <td style="text-align:right;">100.00 €</td>
            <td style="text-align:right;">100.00 €</td>
            <td style="text-align:right;"></td>
        </tr>
    <tr>
        <td colspan="7" style="border-bottom:1px solid #000"></td>
    </tr>
    <tr>
        <td colspan="7" style="border-bottom:1px solid #000"></td>
    </tr>
    <tr>
        <td colspan="3">
        </td>
        <td>
            Summe Nettobetrag:
        </td>
        <td colspan="2" style="text-align:right;">
            100.00 €
        </td>
    </tr>
    <tr>
        <td colspan="3">
        </td>
        <td>
            VAT. (19%):
        </td>
        <td colspan="2" style="text-align:right;">
            19.00 €
        </td>
    </tr>
    <tr>
        <td colspan="3">
        </td>
        <td>
            <b>Total gross:</b>
        </td>
        <td colspan="2" style="text-align:right;">
            <b>119.00 €</b>
        </td>
    </tr>
    <tr>
        <td colspan="7" style="border-bottom:1px solid #000"></td>
    </tr>
    </tbody>
</table>




<table style="margin-top:3mm">
    <tr>
    <td colspan="5" ><br />Thank you for being our customer.<br /></td>
    </tr>
    <tr style="font-size:8pt">
        <td colspan=5>




Our terms and conditions apply (<a href="#">Terms and Conditions</a>).        </td>
    </tr>
</table>

CSS Inline Styles sind XSLFO Styles

Das was im Beispiel aussieht wie CSS-Styles sind eigentlich XSLFO-Styles (siehe z.B. hier). [XSLFO](https://de.wikipedia.org/wiki/Extensible_Stylesheet_Language_%E2%80%93_Formatting_Objects#:~:text=XSL%2DFO%20(Extensible%20Stylesheet%20Language,auf%20einer%20Seite%20angeordnet%20werden.&text=Mit%20XSL%2DFO%20k%C3%B6nnen%20Dokumente,%C3%BCber%20einen%20Sprachsynthesizer%20formatiert%20werden.) ist die zugrundeliegende Sprache, aus der das PDF-erzeugt wird. Das HTML wird dabei in XSLFO umgewandelt und daraus dann das PDF erzeugt.
D.h. es dürfen nur Style bzw. Attribute verwendet werden, die auch XSLFO erlaubt wie z.B. background-color, font-size, text-align usw.

Weitere Attribute: https://www.data2type.de/xml-xslt-xslfo/xsl-fo/xslfo-referenz/attribute (externer Link)

D.h. dieser inline-style

style="text-align: center; color: red"

wird im Hintergrund umgeschrieben zu:

text-align="center" color="red"

Vorlage

Eine Vorlage, wie man dynamisch aus JSON-Daten ein PDF erzeugt findet man in dieser Vorlage.

Unterstützte HTML Tags

  • h1

  • h2

  • h3

  • h4

  • h5

  • h6

  • a

  • p

  • div

  • span

  • img (Bild-URL muss öffentlich erreichbar sein oder base64, siehe Beispiel)

  • hr

  • br

  • pre

  • b

  • strong

  • i

  • u

  • cite

  • code

  • big

  • small

  • sub

  • blockquote

  • ul / ol / li

  • table

  • tr

  • td

  • thead

  • tbody

  • tfoot

Bilder in PDF einbinden

Um Bilder in der PDF Datei einzubinden können sie den img Tag verwenden. Als Quelle (src) kann dabei eine öffentlich erreichbare URL oder base64 kodierte Bilddaten verwendet werden, z.B. : 

<h1>Html2PdfConverter Bilder</h1>
<hr />
<h2>JPG URL</h2>
<img width="100" src="https://apps.synesty.com/templates/templatesv2/img/studio_inline_logo_square_200.jpg">
<h2>JPG Base 64</h2>
<img width="100" src="data:image/jpeg;base64,/9j/4AAQSkZ...">

Beispielflow:

FlowExport-pdf-1-Bilderinpdf.json

Inputs

Das sind die Optionen, mit denen man den Step konfigurieren kann.

Name Datentyp Beschreibung Pflichtfeld Werte
inputFile FILELIST Ihre HTML Eingabedatei Ja
outputFileName STRING PDF-Dateiname. Ja
pageSize STRING Ermöglicht es Ihnen, die Größe der Seiten festzulegen (z.B. A4, A3 oder eine benutzerdefinierte Höhe und Breite). Ja
  • Automatisch
  • A5
  • A4
  • A3
  • US-Letter
  • US-Legal
  • Benutzerdefiniert
pageHeight STRING Seitenhöhe in mm Nein
pageWidth STRING Seitenbreite in mm Nein
pageOrientation STRING Seitenausrichtung Nein
  • Porträt
  • Landschaft
enablePageNumbers STRING Wenn aktiviert, werden die Seitenzahlen auf die Ergebnis-PDF-Datei gedruckt Nein
  • Aktivieren
  • Deaktiviert
enablePageTitle STRING Wenn aktiviert, wird der Seitentitel (aus dem HTML-Titel-Tag) auf jeder Ergebnisseite gedruckt Nein
  • Aktivieren
  • Deaktiviert
marginBottom STRING Margin des Inhalts bis zum Ende der Seite in mm Nein
marginTop STRING Margin des Inhalts bis zum Ende der Seite in mm Nein
marginLeft STRING Margin des Inhalts bis zum Ende der Seite in mm Nein
marginRight STRING Margin des Inhalts bis zum Ende der Seite in mm Nein
outputType STRING FILE - Die Ausgabe ist eine einzelne Datei (Standard). FILELIST - Die Ausgabe ist eine Liste von Dateien. Nein
  • DATEI
  • FILELISTE
strictValidation STRING Wenn Sie diese Option auf "Deaktiviert" setzen, ist der PDF-Renderer nachsichtiger, wenn es um gültige oder nicht erlaubte Attribute geht, z.B. dürfen Sie border in einem body angeben, ohne dass ein Fehler kommt - was aber eigentlich nicht erlaubt ist. Nein
  • Aktiviert
  • Deaktiviert

Outputs

Das sind die Ergebnisse des Steps, die von nachfolgenden Steps, nach der Ausführung verwendet werden können.

Name Datentyp Beschreibung Pflichtfeld Werte
pdfFile FILE Eine oder mehrere PDF-Dateien (je nach Anzahl der Eingabedateien). Ja
Impressum | Datenschutzhinweise
© Synesty GmbH, 2025 - No Code - Low Code Integration Platform - Schnittstellen & API-Anbindungen