PDF Preview in a new window - Reactive
Application Type
Reactive

Hi buddies,


I hope you're doing well.


I want to open a pdf stored in my database in a new window/screen.


Basically, I have a block with a link, and when I click on the link I want to open the pdf in a new window.

I used the attribute "target = "_blank" and when I click on the link, I can open it in a new window but I can see the content of the pdf.


What should I do?


Thank you,

FC

Champion
Solution

Hi , 

You can open pdf files by using simple javascript. 


var pdf_newTab = window.open("");

pdf_newTab.document.write(

    "<iframe width='100%' height='100%' src='data:application/pdf;base64, " +

    encodeURI($parameters.BinaryData) + "'></iframe>"


);


Note: application/pdf is the mimetype . 

$parameters.BinaryData- is the binary input parameter.


Please check the uploaded oml. 




PDfOpen.oml

Hi Rahul,


Thank you for your answer.


This solution works for me and now I can open the pdf on a new window, but I have two questions:


1. If I want to open another type of files like png, jpeg ou docx, it's possible?

2. When I open the pdf on a new window I can't do the download of the file, do you know why?


Thank you for your support,

FC

Champion

Hi, 

1.  Yes, You can open another type by changing MimeType. 

e.g- 

For png - your mime type will be  - image/png

In JS just replace application/pdf  as  image/png   and this should work. 


2. By replacing End node to Download. It will even download the file. 

 Cheers, 

Rahul,


1. Yes, I know that, but if I want I can use a parameter on the javascript script for the mime type or not?


2. Regarding the download, this doesn't solve what I need because the download that I want to do is when I open the pdf in a new window (see the image below)


When I click on the download button nothing occurs. Do you know why?


Thank you,

FC

Champion

Hi Fábio,

In my case, I created a new screen with the screen on ready (or on the screen preparation for traditional web app) with the download widget in the end node.

In the download widget, you can indicate as application/pdf  and save to disk as No.

In the parent screen, you can set to navigate to this new screen and the target set as "_blank" so that it will open as new tab

Hope this helps.

Ronny,


Thank you for your answer.

You send me a solution for traditional web apps, but I'm developing a reactive app.


Thank you,

FC

Champion

Hi FC,

There is already a forge Reactive Web Previewer which allows you to preview documents in Reactive applications.

It comes with the demo as well. It allows you to download the pdf file as well. 

Hope it helps.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.