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
- 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. The header/footer will be repeated for every page.
It also allows you to use LiquidJS for any conditions/loops ect.
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"}
});