How to View PDFs in React JS with React PDF Viewer

hey everyone in this video we will create a PDF viewer in react.js so I have a great I have created this program so right now we have um input field we take a file and also then a button which we'll use for reviewing the PDF so this area that you see in a gray color it is specified for viewing the PDF here and right now we don't have any PDF file so it's as written here that notepad if so let's import a PDF now okay this is a PDF file with us vpdf so it has loaded okay guys so today we will create this example okay using react.js so let's get started guys we need three packages to install them for viewing PDF okay so first we will come to this react PDF keyword this website then to the documentation so here we will come first we will install this package okay first you will sign for MJS this Pikachu okay I have I will list the packages in the description so you can find the links there so first we will install this package and the second package with us is this package okay this core PDF viewer okay it is the second package and the third feature is we will install this plugin okay react with a few default layout okay we will install this you have the link for this in the description you can install using npm it also so now let's start our program how to create this so let's get started RFC and Export it also so I will come here it is the container with me and also I will import the bootstop because I'm using bootstrap and both strap that made it says and here I will create and fulfilled okay I will create a forum and in the form we will have an input field and the type will be fine and also the class name will be as named as is forum control and also I will create a button which is used for view PDF and last name button button success and also type will be submit so I have created this our Forum so down so here I will just try it so let's run our server local server okay until start so it will start the server and by default it will learn the browser so let's see it we have this file and also the button I will specify an area for the PDF and I will assign a class name for this PDF container and so for this container I have written the code in this PDF viewer CSS file okay if container this code is for that container and I will just import that CSS file for that so now whenever we change this input field and also when we click this button submit button so for that first we should have to State the first state is that const PDF file with us whenever we change this input field set PDF file okay and is equal to we will use U State hook and the second one will be you can still view PDF set view PDF you state put by default both will be null with us same to that this one okay so now whenever we click on this input field and we change it we will apply and change in Internet and change handle change okay let me just give one name change now we will implement this function dance handle change is equal to an event will come to this here here now we will write event we will assign that the PDF file to select it file is equal to E Event dot Target dot files zero okay the file will be assigned to the selected variable then a selected file if the file was existed so the first we will specify the extension of the video so for that we will light file type is equal to application slash PDF okay so for that now we will write F selected file and it means if it was to both and then the file type that includes selected file selected file DOT type if the chip type was the same it will come to the food to this body this block of code so then here we here we will create a new um a reader now that reader is equal to new file creator so we have created a numerator now reader dot read as data URL selected file and also reader dot unload another function we will create it now we will set our PDF file set vdf file e dot Target dot result so we have set our PDF file we assign the value to that so now if the extension was not fitted so then else file tunnel and also you can create another state for error so here you will show an error that the file extension is not fit app so now if there was no PDF file you can also assign an error like you right here if you did file was not selected then console.log please select you can write the an error okay so we handled our change a function and we completed our code for this function so now whenever we click the submit button so we should call and change here also and change event handle submit okay we will get that function also advanced header sub a win dot prevent default even the default loading and also now if PDF file was not equal to equal to null so then what it should do it should CC C2 vpdf with the PDF file else set to view PDF null so this PDF file and also set view is a state for us this is also variable let me show that to you this PDF file and set free pdf so we use these two states so now we will write our code for the big if giving okay for this area for the PDF container so for that first I will import the packages which I have installed already I will import those come here and just import them FaceTime here I've imported in this for the csis that is for plugin layout and that is the code library or package and these two will be used for weaving the PDF so now we will come here and write our code here so far weaving the PDF I will copy this code okay first of all the worker and the worker is a property and it will use this link and also the view PDF if the vpdf was existed so the net value is the viewer then we will use that variable which we have created the state that file it will read that fine and it will use this plugin okay this plugin which I have created here okay this plugin okay we have created and imported that from the plugin we imported that here and also if the PDF was not existed then it will lie no PDF okay so let's see how it looks like so right now we have this area and let's select a file not selected the submit button in the submit button here oh sorry we should write here we should write here unsubmit and submit we should call the submit function let's refresh it and let's import a PDF file let's view PDF so see it we have loaded our PDF file okay see it you can just use this size okay and also the pages there are two pages first and second you can search and also a download printing these are the options in this PDF viewer so it was all about viewing a PDF using react.js so if you have liked the video please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 57,038

Keywords: react pdf viewer, react pdf generator, react, react pdf, react tutorial, generating pdf in react, react to pdf, generate pdf with react, how to view pdf files in react, react to print, how to view pdf files in react js, generate pdf using react, react to pdf printing, how to upload and view pdf files in react, how to upload and view pdf files in react js, how to export html to pdf with react, pdf viewer in react js, how to print in react, reactjs

Id: 9eMFU3oV7cQ

Length: 13min 9sec (789 seconds)

Published: Sat Nov 05 2022