How to transform HTML inside UI Template into a image?

Dashboard
1

Hi everyone,

I need help to understand if it's possible to generate a image file (.png or else) from a UI Template HTML code? There is some expecific node to do this? The reason is because I've a layout displayed with this HTML code and now I need to insert this into a PDF report that I'm creating.

Capturar
Capturar1636×470 25.8 KB

flowsSinotic.json (11.5 KB)

2

You should be able to use your browser or OS tools to capture an image of what is on-screen. Edge is particularly good for this, offering several capture methods. In many cases, you can also print direct to PDF - again dependent on your OS and/or browser.

3

Hi, thanks for the answer, but I think I wasn't that clear in my need.

This layout that I have attached is generated through an html/css code for a specific application. This application will now automatically generate periodic reports, so this image capture needs to be done automatically by the system. That is, what I need would be a solution on how to render this content so that I can generate an image to automatically place it in the report similar to this example here (where the person does it with graphics)

Thanks!

4

Are you saying that the page isn't generated from Node-RED? If that is the case, then the first task would be to grab the page into Node-RED and then output to PDF.

There are a number of nodes that can probably do this in either 1 or 2 steps. I would start by looking here:

PDF - Node-RED Library

I noted at least one that can use Puppeteer (a headless browser library) that might be a good candidate to start looking at.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.