# Place image in a pdf automatically generated by node-red

**URL:** <https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134>\
**Category:** General\
**Tags:** pdf\
**Created:** [1 February 2024 19:54 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134 "2024-02-01T19:54:07Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [1 February 2024 19:54 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/1 "2024-02-01T19:54:07Z")

</div>

I'm trying to put an image of my dashboard into a PDF automatically clicking on inject, this image is generated by the "node-red-contrib-web-page-screenshot"  
but I'm not getting it, here's my flow

```auto
[{"id":"67c61941.053d58","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"2fe6f48.ec2f80c","type":"screenshot","z":"67c61941.053d58","name":"","url":"http://localhost:1880/ui/","path":"","x":270,"y":200,"wires":[["1e113dda9c6c4827"]]},{"id":"962a41100eaf3347","type":"inject","z":"67c61941.053d58","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":160,"wires":[["2fe6f48.ec2f80c"]]},{"id":"1e113dda9c6c4827","type":"pdfmake","z":"67c61941.053d58","name":"","outputType":"base64","inputProperty":"payload","options":"{}","outputProperty":"payload","x":300,"y":240,"wires":[["30ba1a2058d41330"]]},{"id":"30ba1a2058d41330","type":"file","z":"67c61941.053d58","name":"","filename":"C:/Users/Smart4.0/Downloads/pdfdash.pdf","filenameType":"str","appendNewline":true,"createDir":false,"overwriteFile":"false","encoding":"none","x":510,"y":300,"wires":[["bcc52d7892a83a76"]]},{"id":"bcc52d7892a83a76","type":"debug","z":"67c61941.053d58","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":700,"y":340,"wires":[]}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [1 February 2024 23:59 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/2 "2024-02-01T23:59:09Z")

</div>

1. what platform is NR running on?
2. what version of NR and node.js are you running (see startup log for this info)
3. does NR crash when you run your flow?

I just tried your flow on my Mac and there was an Uncaught Exception  
(GitHub issue opened: [Crashes Node-RED with an 'Uncaught Exception' running on Mac · Issue #13 · pokiiio/node-red-contrib-web-page-screenshot · GitHub](https://github.com/pokiiio/node-red-contrib-web-page-screenshot/issues/13))

Please check your node-red log after you run a test.

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [15 February 2024 11:52 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/3 "2024-02-15T11:52:20Z")

</div>

I'm running version 3.1 on my personal computer, but I'm using port 1881, but that doesn't change anything.

Updated node:

```auto
[{"id":"9922be47d9a20ea8","type":"screenshot","z":"4748a14914e6348b","name":"","url":"http://localhost:1881/ui/","path":"","x":570,"y":240,"wires":[["6db30aa8db46f05d"]]}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 February 2024 11:59 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/4 "2024-02-15T11:59:18Z")

</div>

> [@Erissin\_Industria4.0](#):
>
> I'm running version 3.1 on my personal computer

so is that a Mac or Windows or a pi or maybe a linux bus...

what do you see in the node-red log?

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [15 February 2024 12:01 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/5 "2024-02-15T12:01:19Z")

</div>

Its Windows, when I run it it runs normally

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 February 2024 12:15 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/6 "2024-02-15T12:15:04Z")

</div>

I would put a debug node (set to display the complete msg object) on the output of both the 'screenshot' and 'pdfmake' nodes to see what they are showing.

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [15 February 2024 12:19 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/7 "2024-02-15T12:19:51Z")

</div>

I changed some things, now I don't think it's going to fall

```auto
[{"id":"92eb446abd94871c","type":"inject","z":"4748a14914e6348b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":220,"y":140,"wires":[["9922be47d9a20ea8"]]}]

```

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [15 February 2024 12:21 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/8 "2024-02-15T12:21:30Z")

</div>

It generates the pdf, but I don't know how to work with the image data type and place it in the pdf

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [15 February 2024 14:58 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/9 "2024-02-15T14:58:43Z")

</div>

The docs for pdfmake show you how to include images

[https://pdfmake.github.io/docs/0.3/document-definition-object/images/](https://pdfmake.github.io/docs/0.3/document-definition-object/images/)

So extrapolating from that, convert image to base64, add it to PDF content, save to file

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7f18cb8ca45398fce3cf93c5f234f9dc8c8d9891.png)

Flow for above demo: requires `node-red-contrib-image-tools` & `node-red-contrib-pdfmake`

```auto
[{"id":"7855b31f.be455c","type":"inject","z":"73b44920080e0db3","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":480,"y":500,"wires":[["deb0cb7887a86149"]]},{"id":"54ef025d.56fccc","type":"template","z":"73b44920080e0db3","name":"","field":"payload","fieldType":"msg","format":"json","syntax":"mustache","template":"{\n \"pageSize\": \"A4\",\n \"pageOrientation\": \"portrait\",\n \"pageMargins\": [\n 40,\n 60,\n 40,\n 60\n],\n \"info\": {\n \"title\": \"awesome Document\",\n \"author\": \"john doe\",\n \"subject\": \"subject of document\",\n \"keywords\": \"keywords for document\"\n },\n \"content\": [\n \"Sample Image from file\",\n {\n \"image\": \"{{{payload}}}\",\n \"width\": 200\n },\n \"Sample SVG\",\n {\n \"svg\": \"<svg width=\\\"300\\\" height=\\\"200\\\" viewBox=\\\"0 0 300 200\\\"><polygon points=\\\"100,10 40,198 190,78 10,78 160,198\\\" style=\\\"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;stroke-linecap:round;\\\"/></svg>\",\n \"width\": 150\n }\n\n]\n}","output":"json","x":660,"y":560,"wires":[["bdd7feab.d9412"]]},{"id":"57c0a23a.ab3bec","type":"file","z":"73b44920080e0db3","name":"","filename":"test.pdf","filenameType":"str","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"none","x":660,"y":620,"wires":[[]]},{"id":"bdd7feab.d9412","type":"pdfmake","z":"73b44920080e0db3","name":"","outputType":"Buffer","inputProperty":"payload","options":"{}","outputProperty":"payload","x":820,"y":560,"wires":[["57c0a23a.ab3bec"]]},{"id":"deb0cb7887a86149","type":"jimp-image","z":"73b44920080e0db3","name":"Kitten from placekitten.com","data":"http://placekitten.com/300/300","dataType":"str","ret":"b64","parameter1":"","parameter1Type":"msg","parameter2":"","parameter2Type":"msg","parameter3":"","parameter3Type":"msg","parameter4":"","parameter4Type":"msg","parameter5":"","parameter5Type":"msg","parameter6":"","parameter6Type":"msg","parameter7":"","parameter7Type":"msg","parameter8":"","parameter8Type":"msg","sendProperty":"payload","parameterCount":0,"jimpFunction":"none","selectedJimpFunction":{"name":"none","fn":"none","description":"Just loads the image.","parameters":[]},"x":700,"y":500,"wires":[["20e4615dd8c0dee8"]]},{"id":"20e4615dd8c0dee8","type":"image viewer","z":"73b44920080e0db3","name":"","width":"200","data":"payload","dataType":"msg","active":true,"x":990,"y":500,"wires":[["54ef025d.56fccc"]]}]

```

  

There is also a built in demo `CTRL-I` -\> examples -\> node-red-contrib-pdfmake

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/017dec0d67f11e63cf7c0712f58f798db39d0c2a.png)

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [16 February 2024 21:46 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/10 "2024-02-16T21:46:44Z")

</div>

Thank you very much for the explanation, I had no idea that the nodes had these examples ready, and how would I go about adding more than one image?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 February 2024 22:13 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/11 "2024-02-16T22:13:54Z")

</div>

Well, add more images to the msg object and then update the template to use them.

If you don't know what that means then I recommend watching this playlist: [Node-RED Essentials](https://www.youtube.com/playlist?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6). The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 March 2024 13:11 UTC](https://discourse.nodered.org/t/place-image-in-a-pdf-automatically-generated-by-node-red/85134/12 "2024-03-06T13:11:39Z")

</div>

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