Skip to end of metadata
Go to start of metadata

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 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


  • No labels