How to View Pdf in React using React PDF || React PDF Viewer || Full setup React PDF || React JS

hello guys welcome back to the debug arena in the previous video we have created half of this application where we were giving the title of the PDF using the PDF file and on click of submit it will upload this PDF file to mongodb and after that all the uploaded PDF will be shown here now in this video I will integrate react PDF to show this PDF file in our react application like this so that when user will click on this show PDF this PDF file will be loaded here in our react application to implement this feature we are going to use react PDF so that whenever user will click on show PDF it will be shown inside the react application like this so without any delay let's get started for that you can go to Chrome search for react PDF you have to open react PDF by npm.org it will take me to documentation let me just scroll down and you can see the first step is to import this react PDF I've already installed it so I will just copy this go to my front end folder all this code is to upload the PDF from react to mongod DV and to fetch it back if you also want to learn that then you can go and watch my previous videos otherwise you can continue from here so I will import the PDF now let's go to the documentation I will also copy this this is important for the setup so I will paste it here only now I will hit save let's go there scroll a little bit down this is the example of how to add react PDF so I can copy this go to my front end folder create a new folder inside this SRC make sure to create inside SRC it will be pdf.js here I will paste that I will change the name of the component it will be PDF com I will copy this I will export this done this is written inside typescript that's why we are getting this error so I can remove this this also and this number done I will hit save now I will go to app.js come here import that compo and it will be PD F form it will already be imported let's see whether it got imported or not and yes it is imported let's go to our application I will just reload this and you can see I'm getting failed to load PDF file let's go to our code okay okay I have not passed this some file.pdf I have to pass here this PDF file which I have imported manually so I can import it here like this import PDF and my PDF name will be 1. PDFs we have to import it like this then I will come here and I will pass PDF now I will hit save let's go to our application and you can see I'm getting this PDF also we are getting this text it is because it is scanning our PDF and converting all the text it scans and show it here so we have to disable this for that I can from here and inside this page I can pass render text layer also we have to pass render annotation layer to false I will hit save let's go to the application and you can see I'm getting only one PDF but here you can see in this PDF I'm having two pages but I'm able to see only one for that we can go to our front end and here how it is working we have created this two state name as num page P them and this is the function which is getting called on this onload success which is provided by this react PDF only and in this I'm passing this function which is returning this and it is storing num Pages inside this set num pages and here inside page number I am passing this page number which is my current page number and it is only one like it is not incrementing that's why we are getting only first page so to solve this I can come here inside page number we are get getting the first page number inside num Pages we are getting total number of pages so what I will do I will just array over it so I can write here array not array over it map over it it will be null after that I will pass array and its limit will be num Pages this means how many element array will have after this I will just map over it we can pass it here I I will be index so I I will increment the index once incremented I will again map and in this I'm passing this page and here I can pass this page number now I will just control X Plus control V now this page will run equals to the pages of the PDF now I save go to the application ar. map is not a function okay I have to not map here I have to apply here so that it will convert this num pages to array now let say go to the application and here you can see we are getting page one of two but we are not getting any Pages let's go there it is because I have to pass your page like this page so I will give you a page let's again go there we are not getting anything because we haven't returned it so I can write here return and inside this we have to pass this page I will hit save come here refresh this and you can see I getting the PDF and I'm getting all the pages remember to change this from page number to this page now it is all working fine you know we can also modify the UI of the PDF by referring to the document so let me change some styling now here at the div I will pass class name as PDF div all so I will pass this page number at the top of the PDF so that I will know how many pages are there now I will hit sa I will go to index. CSS and you can see these are the CSS properties which I have added padding is 50 pixel background color is this and the margin top is 50 pixel let's go to our application and you can see it is looking fine you can also change the size and the scale of the PDF and you can do many more things so for that you can just go and explore the documentation you know you can see here all the pages are connected so to solve that what I can do I can just click on inspect let's try to add some CSS property here I will add margin bottom as 50 pixel and when I do that you can see it is looking fine so what I have to do I have to copy this CSS from here and I can paste it inside my code this is the best way to find the class of the element you don't know so I will hit save I will come here I will reload this and you can can see I'm getting margin bottom as 50 all the pages are separated now our only job remaining is to show this PDF dynamically for that I can come here go to my app.js here I will create a state name as PDF file now we just scroll a little bit down this is a function show PDF which is opening our PDF in another type of the Chrome what I will do I will write here set PDF file and in that I will pass this URL so I will copy this and I will paste it here and I will just comment this out now I will send this state PDF file to our PDF form for that I can come here I can write here PDF file is equals to PDF file this is my state I will hit save I will come to PDF com I will accept the props and here instead of PDF I can pass drops. PDF file now I will hit save let's go there and you can see I'm getting no PDF file specified but when I click on show PDF you can see I'm getting this PDF when I click on this PDF you can see it is loading another PDF which is of 145 pages and it will show us all the pages let's wait to load and you can see it has been loaded that's it for the video and I hope you understand everything and if yes you did then please like the video and leave a comment for me so that I will also feel that you have learned something from me stay tuned for more videos thank you

Channel: The Debug Arena

Views: 20,998

Keywords: view pdf in react, how to view pdf in react js, view pdf with react-pdf, react pdf viewer, how to show pdf in react, view pdf in react js, react js pdf, pdf in react js, how to show pdf in react js, show pdf in react js from mongo db, fetch pdf from mongo db, react js, mern stack, learn react, how to view pdf using react pdf viewer, show pdf, view pdf, view pdf in react react js

Id: 0FRyKY_PMLE

Length: 9min 5sec (545 seconds)

Published: Tue Oct 10 2023