# Html to PDF
Use the PDF connector to create PDF files in your workflow. The connector uses Hypertext Markup Language (HTML) to define the layout of your PDF pages and fully supports using [FlowScript](https://help.novacuraflow.com/6.11/development/flow-studio/flowscript).
## **Connector Output**
The output from the connector is a standard [file record](#file-record).
## **General Tips & Tricks**
* Write as simple [HTML](#html) as possible by hand: You will run into problems if you use code taken straight from WYSIWYG HTML editors. Gain some basic knowledge of how to code [HTML Tables](https://www.w3schools.com/tags/tag_table.asp) and using [CSS style sheets](https://www.w3schools.com/tags/tag_style.asp) and you will thank yourself later. Also it's great fun :slight\_smile:
* In most use cases, you want to take control over the [page breaks](#page-breaks) in your document using the [page-break-inside](https://www.w3schools.com/cssref/pr_print_pagebi.asp) CSS property.
* In order to enable CSS for your document, head to the [CSS Section](#styling-css).
* Try to structure your workflow in a way so that you build your html document in modules. This is especially useful when you are designing complex documents with several parts. To achieve modularity, you can for example write your CSS code in a [script-step](https://help.novacuraflow.com/6.11/development/flow-studio/applications/workflow/script-item), your header code in another script-step and so on. Then in your connector HTML settings, you just end up with the document skeleton. An example of this can be found in the [Layout Examples section](#layout-examples).
{% hint style="info" %}
**Pro Tip:** Create a simple workflow with a PDF connector and a user step. In the user step, add a file gallery with the generated PDF document(s) and use the workflow for designing and debugging your page layouts.
Another good practice is to use one machine step per distinct document section (if you build a complex document) and then supply the previous PDF document (file record) as input parameter for the next PDF task (see [Append to an existing PDF](#append-to-an-existing-pdf)).
{% endhint %}
## Settings
This chapter describes the available settings in the PDF connector.
### **File Name**
This string defines the filename-key value of the target [file record](#file-record).
```
#### Supported image formats
The following image formats are supported by the connector:
* **BMP**
* **GIF** (with optional transparency)
* **PNG** (with optional transparency)
* **JPEG**
* **TIFF** (with optional transparency)
### **HTML**
The connector supports the [HTML 4.01 specification](https://www.w3.org/TR/html401/).
The document layout is defined using HTML. It's recommended to keep the code as simple as possible and build the layout using a bottom-up approach. If you are new to HTML, visit [WordHtml](https://wordhtml.com/). However if you use the generated code directly you will get disappointed as there are some important aspects to keep in mind. Most importantly, you need to use percentages instead of absolute values for width. Keep the total width of your columns at about 95%.
page content...
...
```
### Magic tags
Magic Tags are a connector specific tag system which enables the usage of both [FlowScript](https://help.novacuraflow.com/6.11/development/flow-studio/flowscript) and CSS in the [HTML](#html) section of the connector settings. This section will walk you through how to enable Magic Tags parsing and how to use them with CSS in your page layouts.
#### Enabling magic tags
To enable parsing of the tags, you just need to add the line *\[\_ENABLE\_MAGIC\_TAGS\_]* in the HTML section of the connector settings:
```css
[_ENABLE_MAGIC_TAGS_]
```
#### Using magic tags to write CSS code
In order to convert your CSS code to be usable by the connector:
1. Replace all left curly brackets "{" with "\[\_CBL\_]"
2. Replace all right curly brackets "}" with "\[\_CBR\_]"
This is how the converted CSS code from the header/footer example above will look like:
```css
.header [_CBL_]
position: fixed;
left: 20px;
top: 20px;
[_CBR_]
.footer [_CBL_]
position: fixed;
left: 20px;
top: 750px;
[_CBR_]
```
## Layout Examples
### Document Skeleton
Sample document skeleton including style sheet, header and footer which are defined in [script steps](https://help.novacuraflow.com/6.11/development/flow-studio/applications/workflow/script-item) in the workflow:
```markup
[_ENABLE_MAGIC_TAGS_]
{pdf_stylesheet}
{pdf_header}
{pdf_footer}
Heading
```
### Style Sheet
Sample [MagicTag](#magic-tags)-formatted CSS code defined in a [script step](https://help.novacuraflow.com/6.11/development/flow-studio/applications/workflow/script-item). The output variable name *pdf\_stylesheet* is used and then referred to in the [document skeleton](#document-skeleton) above. Note that here we include the \ tags which were excluded in the document skeleton.
```javascript
return ''
&' ';
```
### Header and Footer
Header FlowScript code, referred to as *pdf\_header* in the [document skeleton](#document-skeleton):
```javascript
return '';
```
Footer FlowScript code, referred to as *pdf\_footer* in the [document skeleton](#document-skeleton):
```javascript
return '';
```
### HTML table from flow record
Code referred to as *checklist\_table* in the [document skeleton](#document-skeleton):
```javascript
let infoRec = First(infoTable);
let html = ''
&' '
&' | Info 1: | '
&' Info 2: | '
&' Info 3: | '
&' Info 4: | '
&'
'
&' '
&' | '&infoRec.info1&' | '
&' '&infoRec.info2&' | '
&' '&infoRec.info3&' | '
&' '&infoRec.info4&' | '
&'
'
&' '
&' | Info 5: | '
&' Info 6: | '
&' Info 7: | '
&' | '
&'
'
&' '
&' | '&infoRec.info5&' | '
&' '&infoRec.info6&' | '
&' '&infoRec.info7&' | '
&'
';
return html;
```
### HTML table from flow table
Code referred to as *list\_table* in the document skeleton. Here we use checkbox symbols from the Wingdings font to render good looking checkboxes in the final PDF document.
```javascript
let html = '';
let cbSize = '20';
// Add the table header row:
set html = html
&' '
&' | Information: | '
&' Yes | '
&' No | '
&' Comment: | '
&'
';
// Iterate through the SQL table rows
let counter = 0;
for row in listTable {
let cbYes = 'o';
if row.yes = 1 {
set cbYes = 'þ';
}
let cbNo = 'o';
if row.no = 1 {
set cbNo = 'þ';
}
counter = counter + 1;
let evenRow = ' class="altrow"';
if (Floor(counter/2) < counter/2) {
set evenRow = '';
}
if row.header = 1 {
set counter = 0;
set html = html
&' '
&' | '
&' '&row.information&' | '
&' '
&' | '
&' '
&' | '
&' '
&' '&row.comment&' | '
&'
';
}
else {
set html = html
&' '
&' '
&' '&row.information&' | '
&' '
&' '&cbYes&' | '
&' '
&' '&cbNo&' | '
&' '
&' '&row.comment&' | '
&' ';
}
}
return html;
```
### Adding Fonts
The connector will be able to use fonts installed on the machine hosting the connector.
To install a font in Windows; right-click the .ttf-file and select "Install", then restart the Flow Server.
To specify the font face in HTML, add the font-family style attribute to your HTML element or CSS:
```css
font-family: 'DengXian Light';
```
## Reference
### DTP Point
[DTP points](https://en.wikipedia.org/wiki/Point_\(typography\)) on Wikipedia
{% hint style="success" %}
1 DTP Point = 1/72 inches = 25.4/72 mm = 0.3527 mm
{% endhint %}
### File Record
A file record is a [flow record](https://help.novacuraflow.com/6.11/development/flowscript/variables#records) with two fields: filename and data.
```css
/* FlowScript for a file record */
let fileRec = [filename: 'mySignature1.png', data: mySignatureRecord.data];
return fileRec;
```
