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 named nestedField:

{{#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 named nameField:

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}});