Skip to content
  • Documentation >
  • Apps >
  • File and Document Management >
  • PDF

PDF

Getting Started with PDF

Prerequisites

  • An HTML code you want to convert into PDF

Transformers

HTML into PDF

This module is based on the node-html-pdf converter.

Converts an HTML code into a PDF file.

Select format

Select whether you want to use a predefined format or a custom format.

                           Predefined format
PDF format – Select the format of the output PDF file from the drop-down menu.
Orientation – Select whether the output PDF is oriented vertically (portrait) or horizontally (landscape).
                        
                           Custom format
Enter the custom PDF size (Height and Width). Allowed units are mm, cm, in, px. E.g. 8.50in or 215.9mm.

HTML

Enter the HTML code.

                           Using custom fonts
You can use, for instance, Google Fonts from fonts.google.com.

Example of use

The output PDF contains a barcode created from the text using the Libre Barcode 128 font.

  1. Insert the link with the desired font to the HTML head.

  2. Define the font in the style.

  3. Use style.

                           <!DOCTYPE html>
<html >
<head>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128" rel="stylesheet">
<style >
 .container-1 {
 position: relative;
 }
 #name-1 {
 position: absolute;
 top: 23px;
 left: 01px;
 font-size: 14px;
 font-family: 'Libre Barcode 128', cursive;
 }
</style>
</head>
<body>
 <div class="container-1">
 <span id="name-1">This is a sample barcode</span>
 </div>
 </body>
</html>

Using images

There are two ways how one can insert an image into the output PDF from the HTML.

1. Standard linking using the img src tag:

                           <img src="http://server.com/images/image.png">

2. Mapping the image using Ibexa Connect modules and base64 encoding scheme:

                           <img id="profileImage" src="data:jpg;base64, [your byte array]">

Replace the jpg with the type of the image and [your byte array] by the mapped array:

                           <img class="logo" id="profileImage" src="data:png;base64, {{base64(5.data)}}">

Replace "5.data" by mapped data from the previous module, e.g. Dropbox > Get a file.

Sample scenario

  1. Dropbox > Get a file module to provide the image for the HTML.

  2. PDF > HTML into PDF module to convert the HTML code (containing the image) to a PDF file.

  3. Dropbox > Upload a file to upload the output PDF to the Dropbox folder.

Border

Define the PDF border size. Allowed units are mm, cm, in, px.

Header 

                           Contents
Enter the desired content of the header (in HTML).
                        
                           Height
Define the header size. Allowed units are mm, cm, in, px.

Footer 

                           Contents
Enter the desired content of the footer (in HTML).
                        
                           Height
Define the footer size. Allowed units are mm, cm, in, px.

Zooming Result PDF When Using Millimeters

When millimeters (mm) are used in the position: absolute; definition, zoom the result PDF in the body as seen in the following example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
            <style>
 * {
 border: 1px dotted black;
 box-sizing: border-box;
 }

body {
 margin: 0;
 font-family: sans-serif;
 zoom: 75%
 }

.header {
 position: absolute;
 width: 180mm;
 height: 45mm;
 left: 20mm;
 top: 0mm;
 }

.address-area {
 position: absolute;
 width: 85mm;
 height: 45mm;
 left: 20mm;
 top: 45mm;
 padding-left: 5mm;
 }

.address-area .return {
 width: 100%;
 height: 5mm;
 font-size: 80%;
 }

.address-area .note {
 width: 100%;
 height: 12.7mm;
 }

.address-area .address {
 width: 100%;
 height: 27.3mm;
 }

.info {
 position: absolute;
 width: 75mm;
 height: 40mm;
 left: 125mm;
 top: 50mm;
 }

.text {
 position: absolute;
 width: 165mm;
 height: 155mm;
 left: 25mm;
 top: 108mm;
 }

.footer {
 position: absolute;
 width: 165mm;
 height: 15mm;
 left: 25mm;
 top: 273mm;
 }

img {
 width: 100%;
 }

.logo {
 position: absolute;
 left: 5mm;
 bottom: 10mm;
 width: 80mm;
 }
 </style>

<div class="header">
 </div>
 <div class="address-area">
 <div class="return">
 </div>
 <div class="note">
 </div>
 <div class="address">
 </div>
 </div>
 <div class="info">
 </div>
 <div class="text">
 </div>
 <div class="footer">
 </div>