Usage ‐ PDF templates
When opening the TTA module you will see the following:
Here you can see all templates and you can create new ones.
On the top right you can click on the add button.
Here you can fill in a form to create a new template.
After this you can click on a template and it will open up the editor:
The toolbar has the following actions (from left to right):
- Edit template properties, edit the format/name ect here
- Toggle code/preview mode, this will allow you to preview the HTML that is being generated or to just view the html as is.
- Align your code (using html-format)
- Save, save the template
- Resizer, resizes the editor + preview window
- Close, close the template editor
The editor on the left allows you to use HTML to style your PDF. The dropdown allows you to switch between Header/Body/Footer/Test input. The header/footer will be repeated for every page.
It also allows you to use LiquidJS for any conditions/loops ect.
The test input allows you to define a payload for the "preview" mode. It will allow you to easily see the results of the template that you write. The preview/input will be rerendered on every change
The input on the bottom will expect a JSON object:
In this case the HTML template is:
<h1>Hello {{name}}!</h1>
This option allows you to use the data thats being generated by a flow.
It allows you to easily (re)use data between templates & development.
The header and footer have support for the following tags:
- date formatted print date
- title document title
- pageNumber current page number
- totalPages total pages in the document And can be used with .
Example:
<span class="pageNumber"/>/<span class="totalPages"/>.
Keep in mind that there is no support for rendering images from an url right now.
You can embed images by using the Base64 format, you can use tools like Base64 Guru to convert your image into Base64.
You can use the template in Flows with the TTA operation:
The fields are self describing and allow for the flow tags {{}} to be used for any variables.
You can also generate PDF`s based on templates within Directus Hooks/Endpoints/Operations. This can be done trough globalThis.TTA.
An example usage:
const fileID = await globalThis.TTA.generatePDFFromTemplate({
template: templateIDHere,
templatevariables: { variableOne: "A", variableTwo: "B"}
});