How to transform HTML inside UI Template into a image?

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.

flowsSinotic.json (11.5 KB)

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.

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)


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.

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