Creación de pdfs

Totalum permite crear pdfs totalmente personalizables y dinámicos a partir de html y 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...

Si tienes dudas de como instalar y usar TotalumSdk mira la documentación: Instalación SDK de Totalum, y Uso del SDK

Dirígete a Configuración -> Plantillas Pdf

1. Crear la plantilla de pdf

• Introduce el nombre de la plantilla a crear

• Añade el html personalizado con css (flexbox funciona)

• Si el pdf tiene que ser dinámico, añade el código handlebars en el html, ver documentación de handlebars aquí https://handlebarsjs.com/guide/

• Si quieres ver que tal está quedando el pdf, puedes hacer click en el botón de Generar pdf de prueba

Ejemplos

• Mostrar en un h1 el valor de una variable llamada 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}}

• Mostrar en un h1 el valor de una variable llamada nameOfYourVariable que contiene un objeto con un campo llamado nestedField:

{{#if nameOfYourVariable}}
        <h1>{{nameOfYourVariable.nestedField}}</h1>
{{/if}}

• Mostrar en un h1 el valor de una variable llamada nameOfYourVariable que contiene un array de objetos con un campo llamado nameField:

nameOfYourVariable = [ {nameField: 'name1'}, {nameField: 'name2'}, {nameField: 'name3'}, ]

{{#if nameOfYourVariable}}
    <ul>
    {{#each nameOfYourVariable}}
        <li>{{this.nameField}}</li>
    {{/each}}
    </ul>
{{/if}}

• Edita dinámicamente datos de tags html, por ejemplo, si quieres cambiar el src de una imagen:

<img src="{{nameOfYourVariable}}" alt="Company Logo" class="company-logo">

• Operaciones de multiplicación, suma, resta, y división:

<!--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. Como crear el pdf

Una vez tengas creada la plantilla, para generar pdfs dinámicos, necesitarás usar la Api o el SDK de Totalum.

Ejemplo de como crear un pdf dinámico con el SDK de Totalum:

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