Render pdf, docx, xlsx, ppt etc. in react application

in this video we will learn how to render documents in react application documents like word excel PowerPoint PDF PNG or jpg in many more format so let's jump into Visual Studio code I have created a new react application with the have help of create react app script and here I explain one package which help us to render documents file in react application so react doc viewer is a great uh package which help us to render the same thing and it has good Weak download support different type of file format which is mentioned here and we can take some demo here so there is there is a very small steps we need to install it in our react application I have already installed and you can see in package.json it is mentioned so here we can start in the next next step next step is very simple we have to call a doc viewer component which is inside the package so and this component expect document props and plugin renderers props so let me copy this and paste it here I have already import this component in my component Okay so this is expecting docs so let me copy this and paste it here and uh I am going to use some remote URL on which my docx doc file is available so the precondition is for this URL is that this URL should be publicly accessible so I have some of the URL for different different file let me copy a docx word file and paste it here we can check this by pasting in browser it's getting download yeah so you can see that this is the word file which we need to render in that okay now let me close it and I have already pasted here let me remove other one with the uh in with the help of this Docs we also need to provide or tell package file what type of file is so we need to pass another props in which we can tell that this is docx file we also can pass file name so in our case if we have we are getting file name from database or API we can pass those those values but here for demo purpose I am typing this as demo dot docx file and we are passing this to this here I need to make a one more uh thing here I need to set the height of this dock viewer so I am using styles and here I can pass height let's make it 1000 and now we are ready to use that npm run the application npn start and let me open yes so you can see uh doc file is here okay now let's move to let us see uh how Excel file will be added so here you can pass multiple uh document to the doc viewer so by copying this and pass a new object and here for second document I am passing as uh Excel document so let's open that make the change as this one URL this URL is also publicly access here I need to make file type as Excel and demo is demoed sample let's make it demo sample dot XLS let's see what happened here you can see that there are two documents so you can navigate between these documents so on second position you are seeing Excel file and on First Position this is Word file now let's try for third one that is PPT so let me copy that URL PPT URL and file type will be PPT and let's make it some other file name future dot PPT and see it so you can see this time there are three document you can see file name which we are passing from Pro is rendering here and this is PPT which is rendering future dot PPT now uh from remote URL we are done let's try for new document from the local so let's suppose if you have some Word file or some some different like PDF if you have and you want to display on your react application then how we can display that so the ways you can copy this and here you need to pass the URL in some different way like required and in required you can pass the path dot slash and then vs code will suggest you to pick the folder and then file name you have to copy that from here and paste it here here we will change the file type and let's make it the same name all right so here you can see right now four document let's navigate to them third one is PPT and and last one is PDF you can see name here and it is getting loaded yeah load it now let's try some JPG file so let me download some jpg foreign [Music] go to image and then let's suppose I download this image image and my application is inside SRC and then file download jpg all right so in Visual Studio code our file is here okay now let's add another object and here you need to pass image URL that is download Dot jpg jpg is the file type you have to change and download jpg is the file name let's run it here you can see five document let's move to the last all done so image is rendering a JPG file is also rendering so this way we can render different type of files in react application we have some more detail in this also like uh like you can you can make it by default one document as a active document and other settings you can by default integrate with the input type files so as soon as you select any file that immediately you want to display that in dock viewer you can do that uh this is the default doc viewer renderer which this package is used we have different type of renderer if you want to a specific file to render then you can pass any specific renderer you can create your own custom renderer like this and these are some themes you can styling your doc viewer with the help of this so let's copy that and paste it inside the inside the dock viewer and save it and let's see now a style dock viewer is rendering now let's move to the next custom prefetch HTTP web so a prepatch method you can set as a get other than that you can also with the help for you are including URL you can also attach some tokens with the help of the by setting these headers so in my next video I will show you how you can access a API a secure API with a and API is going to return a document and you need to render that in react application so I will cover up that in next video so that's all for uh this tutorial and if this video is helpful for you please uh comment uh And subscribe my channel thank you

Channel: Tech Talk

Views: 25,025

Keywords: doc in react, excel in react, pdf in react, ppt in react, document in react, view doc in react, view excel in react, view pdf in react, react-doc-viewer, react, @cyntler/react-doc-viewer, reactjs, view document in react, view ppt in react, view pptx in react, view docx in react, view xls in react, view xlsx in react, view word file in react, how to view docx in react

Id: E0aK6CKsSNg

Length: 12min 35sec (755 seconds)

Published: Sun Mar 19 2023