Display PDF file on Dashboard

#1

Hi everyone,

I'm trying to display a local pdf file on the dashboard (the file path is C:\Users\Silvia\Downloads\test.pdf);

I've tried using a template node with this code on it, as seen on other posts:

<div>
    <a href="file:///C:\Users\Silvia\Downloads\test.pdf" type="application/pdf"><span>Link</span></a>
</div>

I've also tried different variations of it, like using iframe or embed, but nothing works :frowning:

If I copy this: file:///C:\Users\Silvia\Downloads\test.pdf on the browser tab then it works.

However, if I copy the same path onto the dashboard link, it doesn't work.

Any ideas about what I'm doing wrong, please?

Additional info:

  • Running Node-Red on Windows 7 (hosted and accessing it locally -- it will eventually move to a Linux server)
  • Node-Red version v0.18.4
  • Node-Red-Dashboard v2.9.6
  • The inject and the ui template node:

[{"id":"337fba3e.8f9676","type":"inject","z":"f07539be.1a42e8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":570,"y":200,"wires":[["eef3f4ba.042618"]]},{"id":"eef3f4ba.042618","type":"ui_template","z":"f07539be.1a42e8","group":"c7449154.b17ef","name":"","order":0,"width":0,"height":0,"format":"<div>\n <a href=\"file:///C:\\Users\\Silvia\\Downloads\\test.pdf\" type=\"application/pdf\"><span>Link</span></a>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":740,"y":200,"wires":[[]]},{"id":"c7449154.b17ef","type":"ui_group","z":"","name":"Default","tab":"b34fbabd.5b2438","disp":true,"width":"6","collapse":false},{"id":"b34fbabd.5b2438","type":"ui_tab","z":"","name":"Test","icon":"dashboard"}]

Thanks :slight_smile:

[EDIT]:
Another approach I've tried is to use a http request, like described here: https://stackoverflow.com/questions/40957970/node-red-upload-attachment-over-http

... but still no joy!

0 Likes

#2

This is related to browser security. a file:// tag is not allowed to point to a local file.
If you check the web inspector>console it will state: not allowed to load local resource

Solution is to make the file available on a (local/remote) webserver.

1 Like

#3

Thanks for your reply @bakman2

For anyone else in this situation... I've got round this problem using the Web Server for Chrome extension

1 Like