Presentation given by iText Software at the ETDA conference in Bangkok at July 27, 2017. It handles about how you can convert HTML to PDF with pdfHTML - an iText 7 add-on.

1. © 2015, iText Group NV, iText Software Corp., iText Software BVBA© 2015, iText Group NV, iText Software Corp., iText Software BVBA
ETDA, INBATEK & iText Conference
Bangkok, July 27, 2017

2. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Three major ways to create PDF
From scratch using iText objects:
Paragraph, Text, Table, Cell, List,…
Advantage: everything is programmable, hence configurable just the way you want it,
Disadvantage: you need to program everything; small changes need programming.
Using an existing template:
AcroForm technology: fast, easy, but not dynamic (all fields have fixed positions),
XFA technology: dynamic, filling is easy, but form creation is complex, deprecated in PDF 2.0!
By converting HTML + CSS to PDF:
Everyone knows HTML! Everyone knows CSS!
Why would you create a template in another (proprietary?) format?
Create content in HTML, convert to PDF with pdfHTML.
HTML to PDF conversion with pdfHTML2

3. © 2015, iText Group NV, iText Software Corp., iText Software BVBA© 2015, iText Group NV, iText Software Corp., iText Software BVBA
CSS examples
 No CSS,
 Inline CSS,
 Header CSS,
 External CSS.

4. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
No CSS: HTML + pdfHTML code
HTML to PDF conversion with pdfHTML4

5. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
No CSS: result
HTML to PDF conversion with pdfHTML5

6. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Inline CSS: HTML + pdfHTML code
HTML to PDF conversion with pdfHTML6

7. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Inline CSS: result
HTML to PDF conversion with pdfHTML7

8. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Header CSS: HTML + pdfHTML code
HTML to PDF conversion with pdfHTML8

9. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Header CSS: result
HTML to PDF conversion with pdfHTML9

10. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
External CSS: HTML + pdfHTML code
HTML to PDF conversion with pdfHTML10

11. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
External CSS: result
HTML to PDF conversion with pdfHTML11

12. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Adding a background
HTML to PDF conversion with pdfHTML12

13. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Background
HTML to PDF conversion with pdfHTML13

14. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Use in the context of pdfHTML
Other convertToPdf() method: FileInputStream and PdfDocument
Why do we need ConverterProperties?
HTML to PDF conversion with pdfHTML14

15. © 2015, iText Group NV, iText Software Corp., iText Software BVBA© 2015, iText Group NV, iText Software Corp., iText Software BVBA
Use case: invoices
For every customer you need:
 Raw data that can be converted to simple HTML
 A customer-provided CSS to apply styles
 A customer-provided PDF as company stationery

16. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
ZUGFeRD examples
HTML to PDF conversion with pdfHTML16

17. © 2015, iText Group NV, iText Software Corp., iText Software BVBA© 2015, iText Group NV, iText Software Corp., iText Software BVBA
Responsiveness: HTML vs PDF

18. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
HTML and different devices
When creating an HTML + CSS file, you don’t always know how it will be viewed:
HTML to PDF conversion with pdfHTML18

19. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
HTML and different devices
The content can be rendered differently based on the device:
Header, main, left and right pane can be reorganized based on available space
Navigation can be different on different devices
Orientation can change (e.g. turn tablet from portrait to landscape)
You can change the rendering based on Media Queries
Change font, widths, image size, positions,…
 Desktop screens: horizontal placement, smaller font-size,…
 Mobile screen: larger font size, vertical flow,…
 Print: hide interactive and animated features, use less color,…
HTML to PDF conversion with pdfHTML19

20. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Example HTML
HTML to PDF conversion with pdfHTML20

21. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Example HTML
HTML to PDF conversion with pdfHTML21

22. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Media Queries in CSS
HTML to PDF conversion with pdfHTML22

23. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
The problem with PDF on devices
HTML to PDF conversion with pdfHTML23

24. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Convert to different PDFs
HTML to PDF conversion with pdfHTML24

25. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Defining different page sizes
HTML to PDF conversion with pdfHTML25
Introducing:
Tagging
Page sizes
Media Device Description
Create form

26. © 2015, iText Group NV, iText Software Corp., iText Software BVBA© 2015, iText Group NV, iText Software Corp., iText Software BVBA
Create your own tags

27. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Tags student and date don’t exist
HTML to PDF conversion with pdfHTML27

28. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Extend the tag factory
HTML to PDF conversion with pdfHTML28

29. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Custom tags: custom functionality
HTML to PDF conversion with pdfHTML29

30. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
CSS applier needed
More elaborate example: QR Code
QRCodeTagCssApplierFactory extends DefaultCssApplierFactory
QRCodeTagWorkerFactory extends DefaultTagWorkerFactory
QRCodeTagWorker implements ITagWorker
HTML to PDF conversion with pdfHTML30

31. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
HTML + CSS => PDF
HTML to PDF conversion with pdfHTML31

32. © 2015, iText Group NV, iText Software Corp., iText Software BVBA© 2015, iText Group NV, iText Software Corp., iText Software BVBA
iText DITO
Under development

33. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Design Interactive Templates Online
33 HTML to PDF conversion with pdfHTML

34. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
Design Interactive Templates Online
34 HTML to PDF conversion with pdfHTML

35. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
pdfHTML
Tyrion Server
Data
HTML / CSSTemplate PDF
Tyrion
Designer
SQL
JSON
XML
...
Web application
WYSIWYG
Subset HTML
Subset Bootstrap
Data connections
PDF
PDF/A
PDF/U
A
...
Tyrion SDK
Interactive
form
Web form
via web
browser
Request
and submit
data
Front end
Back end
HTML to PDF conversion with pdfHTML35

36. © 2015, iText Group NV, iText Software Corp., iText Software BVBA
pdfHTML
Tyrion Server
Data
HTML / CSSTemplate PDF
Tyrion
Designer
SQL
JSON
XML
...
Web application
WYSIWYG
Subset HTML
Subset Bootstrap
Data connections
PDF
PDF/A
PDF/U
A
...
Tyrion SDK
Interactive
form
Web form
via web
browser
Request
and submit
data
Front end
Back end
<Name>
<Address>
<Invoice items table
(4 cols, headers, ...)>
<Total>
<Name>
<Address>
item qty price tot
<Item> <Qty> <Price> <Tot>
<Item> <Qty> <Price> <Tot>
<Total>.
Raf Hens
Kerkstraat 108
9050 Gentbrugge
item qty price tot
Item A 4 100 400
Item B 1 10 10
Item C 17 45 765
Item D 2 50 100
Item E 1 70 70
Item F 4 250 1000
Item G 5 100 500
Item H 12 3 36
Item I 1 100 100
Item J 1 35 35
Item K 1 250 250
3266.
Raf Hens
Kerkstraat 108
9050 Gentbrugge
item qty price tot
Item A 4 100 400
Item B 1 10 10
Item C 17 45 765
Item D 2 50 100
Item E 1 70 70
Item F 4 250 1000
Item G 5 100 500
p 1/2
item qty price tot
Item H 12 3 36
Item I 1 100 100
Item J 1 35 35
Item K 1 250 250
3266.
p 2/2
HTML to PDF conversion with pdfHTML36

37. © 2015, iText Group NV, iText Software Corp., iText Software BVBA© 2015, iText Group NV, iText Software Corp., iText Software BVBA
Thank you!