HTML2PDFConverter

Der Step HTML2PDFConverteropen in new window 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. hieropen in new window). [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-coloropen in new window, font-sizeopen in new window, text-alignopen in new window usw.

Weitere Attribute: https://www.data2type.de/xml-xslt-xslfo/xsl-fo/xslfo-referenz/attributeopen in new window (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 Vorlageopen in new window.

Unterstützte HTML Tags

h1
h2
h3
h4
h5
h6
a
p
div
span
img (Bild-URL muss öffentlich erreichbar sein oder base64, siehe Beispielopen in new window)
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

# HTML2PDFConverter

# Beispiel

# CSS Inline Styles sind XSLFO Styles

# Vorlage