Render PDF in react from secure API

hello welcome to Tech talk in this video we will talk about how we render our document file in react application in my last video we will talk about how we render document file from a public URL as so in last video as you can see we use this type of URL which is publicly accessible and successfully we demonstrated how we can render publicly available document it can be word excel PowerPoint PDF so if you need I put the video link in description section in this video uh we will talk about a little bit about API because this might be uh this might be the scenario that you need to render uh your document from your secure API so uh react doc viewer package provide us provision how we can render document uh from the secure API so Let's uh do that and jump into the visual studio code so uh I am taking a previous example in which we use Public public URL so I am going to remove that and for demo purpose I have created an API so I can show here so this is a secure API for that I am passing token here so let me check that okay so token is expired so let's generate a new token so let me call auth Api okay and fourth API will provide me token let me copy that and put this in uh we view PDF API so so this is the secure API which return us a PDF document so let's check that by changing something in uh tokens that it is secure or not yes so it is secure if I if I am trying to pass invalid token it is not providing me correct output so let me correct that and then call it again okay so first condition is in this API this API should be course enabled so if in case if your application is hosted in different URL so in that case course error should not generate here I am going to paste that URL simply and the same in case of PDF I have to pass filet up as PDF here and let me name it as demo.pdf as a document name and let's do that try to run it and let's see let me open okay yes so as you were seeing that uh previously docx file was loading but now uh failed to load PDF file why reason is because the URL which I am passing this time is a secure API and uh dot viewer need token or to access the output of this API how we can pass token to this package dock viewer which is part of re-addock viewer package so I will tell you how I can pass token my API token to this dock your component so let's move to the documentation part of this package so here is the documentation let's go down and look into this one by one uh display Globes custom render custom file render theme custom prefetch yes so we need to pass this prefetch as get because we are going to call get API so this props we have to pass as get and in next paragraph here it is mentioned that how we can pass a request header so let me copy that here header is your object and here whatever token key our API Excel we can set that and here we can set our token and if I we have any additional request header then we can set here and number of request header and the same object we need to pass in a request header props of Doc viewer component so let me copy that and paste it here here let's go into the postman and our request header name is a small X auth token so let's do that replace this as token and then copy the token it now uh let me copy that another request header which is content type and we need to set it as application PDF because I am trying to render PDF document so let me do that so now my headers object is ready and now I need to pass this to react top viewer how we can pass we need to do two things first is prefetch method as get and second is request address header so let me copy that and pass it to my DOT viewer component yes copy that save it and try to load in browser Let me refresh the page yeah so as you can see uh our secure API output is rendering here now in the same way we can do the same thing with the with some other document like uh like jpg PNG PTF Etc txt also but exception is for Microsoft Office document like docx Doc file Excel file pptx file the reason is let's look at look into the code of react.viewer so this is the GitHub repository let's go inside this and here I am trying to explain the process how uh word excel PowerPoint document which is publicly available can be rendered in a reactive viewer so let me go inside the SRC folder and then there are there is a renderers from folder in which plenty of renderers are there which type of files are supported by reactive viewer inside this we go into Ms doc and Ms dog inside Ms stock there is index.psx file let's open that here you can see that whatever you are you are providing uh that current document is coming here as a object and this is the URI property so as you can see here uh we we pass URI from a public URL from here so the same public URL goes here and after calling and after encoding that URL we are passing this URL to embed.aspx page which is the part of view of his caps.live.com so this is a aspx page which is uh which Microsoft has hosted and it accept only publicly available URL so there is no way to pass token uh as of now there is no way to pass a token to this page so this is not possible as of now uh using secure API to render word excel and PowerPoint document with the help of this package so this is the thing this is the drawback of this package and apart from that if this video is helpful for you as you can see you are able to render a PDF file in react application so if this is helpful for you uh please like and comment And subscribe my channel TED Talk thank you very much for watching this video

Channel: Tech Talk

Views: 2,739

Keywords: render pdf in react, render pdf in react from secure API, render document in react, render document in react from secure API, how to render pdf in react, how to render pdf in react from secure API, how to render document in react, how to render document in react from secure API, show document in react, show document in react from secure API, show pdf in react, show pdf in react from secure API, embed document in react, embed document in react from secure API, embed pdf in react

Id: zsFYFmP-_CE

Length: 11min 28sec (688 seconds)

Published: Wed Mar 29 2023