UBOS Community

Vika
Vika

Posted on • Updated on

Створення документів в ПДФ форматі.

PDF формат дуже зручний формат обміну даними люди найчастіше використовують документи PDF, коли хочуть обмінюватися інформацією без дозволу редагувати вихідний файл Exchange файл з тим, у кого немає необхідного програмного забезпечення для перегляду вихідного файлу.

Нижче буде розглянуто найпростіший варіант створення документу такого типу на платформі UBOS.

Для цього нам знадобиться:

Крок перший:

На боці UI створюємо інтерфейс та налаштовуємо функції.

UI WIDGETS SETTINGS
Image description Звичайний Input для ввода текстової інформації, налаштування по замовчуванню
Image description Кнопка в налаштуваннях якої на подію OnClick запускаємо функцію створення DPF документу.** Важливо** : PDF документ повинен відкриватися на новій сторінці,тому використовуємо функцію navigateTo де URL це посилання на бекенд де знаходиться flow, в query передаємо інформацію з Input та вказуємо Target - New window

Image description

тіло функції ->

{{navigateTo('https://companybd-632484b419f0331000000199.ubos.tech/getPDF',{"title": Input_title.text,"text":Input_text.text},'NEW_WINDOW')}}

Enter fullscreen mode Exit fullscreen mode

Крок другий:

Потрібно на Flow Builder UBOS зробити наступне:

  1. Cтворюємо flow використовуючи такіNODEs:
NODE INSTALL
Image description Basic NODE node-red 3.0.2
Image description Basic NODE node-red 3.0.2
Image description Need to install node-red-contrib-pdfmake 1.1.0
Image description Basic NODE node-red 3.0.2
Image description Basic NODE node-red 3.0.2

Image description

  1. Налаштовуємо NODEs:
  • Http in:
    Image description

  • function "createContent":
    в msg.payload передаємо дані з input в структуру передбачену для створення Pdf документа. Content:[]- обов'язкова умова, в styles- описуються стилі для документа за бажанням.

Image description

msg.payload =  {
    content: [
        { text: `${msg.payload.title}`, style:'header' },
        { text: `${msg.payload.text}`, style: 'anotherStyle' }
    ],
    styles: {
        header: {
            fontSize: 28,
            bold: true,
            alignment: 'center'
        },
        anotherStyle: {
            fontSize: 18,
            italics: true,
            alignment: 'center'
        }
    }
        }
return msg;
Enter fullscreen mode Exit fullscreen mode
  • pdfmake:

Image description

  • function "createHeaders":

налаштовуємо headers:
Image description

msg.headers = {
    "Content-Disposition": "inline",
    'Content-Type': 'application/pdf'
}
return msg;
Enter fullscreen mode Exit fullscreen mode

Загальний вигляд flow
Image description

В результаті введені дані конвертуються в PDF документ.



Top comments (0)