PDF Creation
Totalum allows you to create fully customizable and dynamic PDFs from HTML and Handlebars.
What happens if you are not programming in javascript?
If you are not programming in javascript, you can use the api directly, see TOTALUM API DOCUMENTATION
If you are programming in javascript, you can use the totalumSdk
Note: If you use totalumSdk inside a totalum plugin, you don't need to authenticate, you can start using totalum sdk functions like this: modules.totalumSdk.ocr.ocrOfImage(fileName); etc...
If you have questions about how to install and use TotalumSdk, check the documentation: Totalum SDK Installation, and Using the SDK
Go to Configuration
-> Pdf Templates
1. Create the pdf template
Enter the name of the template to create
Add the custom html with css (flexbox works)
If the pdf needs to be dynamic, add the handlebars code in the html, see handlebars documentation here https://handlebarsjs.com/guide/
If you want to see how the pdf is turning out, you can click on the
Generate test pdf
button
Examples
- Display in an h1 the value of a variable called
nameOfYourVariable
:
<!--The if statement is no needed but is useful because if nameOfYourVariable is undefined, the if prevents to crash-->
{{#if nameOfYourVariable}}
<h1>{{nameOfYourVariable}}</h1>
{{/if}}
- Display in an h1 the value of a variable called
nameOfYourVariable
that contains an object with a field namednestedField
:
{{#if nameOfYourVariable}}
<h1>{{nameOfYourVariable.nestedField}}</h1>
{{/if}}
- Display in an h1 the value of a variable called
nameOfYourVariable
that contains an array of objects with a field namednameField
:
nameOfYourVariable = [ {nameField: 'name1'}, {nameField: 'name2'}, {nameField: 'name3'}, ]
{{#if nameOfYourVariable}}
<ul>
{{#each nameOfYourVariable}}
<li>{{this.nameField}}</li>
{{/each}}
</ul>
{{/if}}
- Edit the src of an image dynamically, for example, if you want to change the src of an image:
<img src="{{nameOfYourVariable}}" alt="Company Logo" class="company-logo">
- Operations of multiplication, addition, subtraction, and division:
<!--Multiplicate values, nameOfYourVariable1 * nameOfYourVariable2-->
<td>{{multiply nameOfYourVariable1 nameOfYourVariable2}}</td>
<!--Add values, nameOfYourVariable1 + nameOfYourVariable2-->
<td>{{add nameOfYourVariable1 nameOfYourVariable2}}</td>
<!--Subtract values, nameOfYourVariable1 - nameOfYourVariable2 -->
<td>{{subtract nameOfYourVariable1 nameOfYourVariable2}}</td>
<!--Divide values, nameOfYourVariable1 / nameOfYourVariable2 -->
<td>{{divide nameOfYourVariable1 nameOfYourVariable2}}</td>
2. How to create the PDF
Once you have created the template, to generate dynamic PDFs, you will need to use the Totalum API or SDK.
Example of how to create a dynamic PDF with the Totalum SDK:
const templateId = 'your_template_id'; // replace 'your_template_id' with the id of your template id, go to totalum -> configuration -> pdf templates
// the variables will be replaced in your template with handlebars
const variablesExample = { // replace the variables with your variables, can contain nested objects of n deep, can contain strings, numbers, dates, etc.
'your_variable_name': 'your_variable_value',
'your_other_variable_name': {
'your_other_variable_name': 'your_other_variable_value'
'your_other_variable_name': 10,
'your_other_variable_name': new Date('your date'),
},
}
const fileName = 'your_pdf_name.pdf'; // replace 'your_pdf_name' with the name of your pdf
//CAUTION: if you use the same name for multiple pdfs, the pdfs will be overwritten
const result = await totalumClient.files.generatePdfByTemplate(templateId, variablesExample, name);
const fileResult = result.data.data;
// with the fileUrl you can download the pdf
//if you want to link this pdf to an item, you need to add the fileName to the item property of type file
const result2 = await totalumClient.crud.editItemById('your_element_table_name', 'your_item_id', {'your_pdf_property_name': {name: fileResult.fileName}});