Angular 14 Ngx Extended PDF Viewer

all right [Music] welcome to another cup of code we will be looking at um some code to assist you in your daily project and today we will be looking at PDF viewer for angular so um we're running through these commands to get your PDF viewer working and we'll just run all of these accordingly and then once we're done um see that in action so let's get into it please do like and subscribe for more see this in code so what we are going to do I'm gonna start by um just navigate to code Transit code Studios that's where I Wanna Be and we're gonna start by creating a new project let's call it uh PDF uh tutorial let's just call it PDF tutorial fine View and angular routing I always recommend this window one project anyway so we're just gonna see how that looks scaffolding the code for us let's give it some time and come on come on just give it a few it should be done right now it's taking this time so I just want to make this quick for you guys so that you can um sort of take the code plug it in your um in your project and then you can start you can proceed with your work shouldn't be added thing to resolve so let me see and um let's see what's versus doing that um so the websites that we want to look at is the um npm angular X extended PDF viewer that's what we'll be focusing on and we'll also be looking at the PDF show where they actually have the documentation on how to block this so this is where you can go and you'll see um the npm command is here and the um sort of commands that you need to run are all in here and the angular one is there so you'll see this in code in just a few just see if it's done right so it's done now we can see the two PDF tutorial then we want to go to code and we want to see this uh in action let me just say enter full screen so this is what we have and you'll see I'll be taking um let me see this so what I want to do now open the new terminal it's going to give me I don't know what's going on PC it's just slow now so I just want to find my serve this guy so let's open this see what we have there and let's see it in action so I'm gonna write the code whilst um I'm on a watch so that you can see it update if it breaks in between you can break and then we'll fix it so we'll be super quick and my PC is filling the load now interesting all right so it's doing that for us come on come on come on so we're gonna start by uh installing uh that as in according to our tutorial so let's see the selection okay right all right PDF tutorials so this is the product code and it's up and running right cool so that's good now we're gonna come back we're gonna install that and it's gonna give us um do all that now we're good and the next thing to do according to our tutorial we can now add before we add this I recommend to actually add um the assets of folder which you can also get from PDF show on the getting started um read up and this you add on the angular.json then you'll see assets here and then you're gonna add that into the array and then you're gonna save this because what you want to do is that when you actually add um the PDF viewer well it's still gonna do the same thing but it's just I'm gonna give you it's going to scaffold everything that you need on you know you know in projects so we're gonna add that now which still following according to our tutorial we're just adding this before we run this command so let's see that in action it's gonna prompt us name of the project we just want to say default use table version or choose um Leading Edge we just want to use this table and do we want um an example no we don't want an example reason why we don't want any examples because that example will be empty so we're not looking for that we don't want that so nothing to be done so that is that is completed then now we can save our application again and then we get to the code so once this is done we're gonna open um this guy right here I'm gonna open this guy and we're gonna open this guy so we want this to remove this boilerplate code on the HTML so on so while this guy is streaming up and doing all this thing since which words give it a few Passion live by now so let's see that election it's gonna go with another one right here so we're just gonna close one so now it's blank cool this looks good so now what we need to do essentially is to we need to add our code right so I'm just gonna take this from um the previous one that I just got folded quickly so that we sort of cut a lot of time so I'm going to come into this channel then I'm going to explain it on the other hand so I'm gonna change this to PDF tutorial let's go back there and I want to be in the HTML and I want to do that right so we have NG um PDF viewer and we have a div and that dvl button that button actually uh has an unclick and that on click is actually to check the input which is will be our input file but we have and on that input file on chain we will call this function and now let me save this file because it's going to break and you'll see why it broke in a few so we don't have this function yet on our TS so we have nothing here and it's going to break right for all of these reasons and then we have uh our viewer container which is a div and that div this one is uh waiting for an image so this one expects an image and this one expects a PDF document so I'm just gonna I'm giving you the image as well just for you to um be able to see the two right so now we have that and we sort of need to then plug our ts5 right and let me come here and I wanna get that from this guy and from this guy we are going to just take this entire function this entire function on select and we are going to or maybe I can check the whole thing and then I can create you my side and then I'll explain it the side because I don't want to waste a lot of you guys this time all right so let's do this quickly and I'm gonna paste this in here and that sort of looks good let's just save this and it's gonna want us to import something I want us to import that let's just wait for it to come to live because like we've got right so now I'm resolving that and I'm saying add but import and if you want you can also um and you can also add PDF default options which will give you more options to actually work on um how your document looks and whatever you want to zoom in zoom out of that uh nice animation and functionalities that you have on your viewer and then the extended PDF your service will allow you to print on the Fly and all of those uh other nitty gritties so I'm just adding these so as you guys can see that you can also have more to do with your PDF but for now we just want to view the PDF and see it um in action so I'm going to save this and what this is going to do it will resolve everything that is here so if you look at my PDF viewer I am expecting a base64 so it's a base64 and if you check the docs uh in here you will see that um on the code uh they they had code the part two that um that um source for the PDF view which is not always the case especially if you're like developing Enterprise applications so a base64 is one thing that I would recommend so let's go back and see this so I'm expecting a base64 and I'm passing in a selected base64 file which is cool and then um coming back here so on select what we then do is take the event and check the target for the files that we're getting so the selected file we take that and check with not now then we're gonna say um reader we want to run a file reader then we're going to take that file reader data as URL as you can see here we pass that file that we have and then once we have that file as a data URL we're able to then pass that URL in here and we're gonna get that um URL from the reader that we have and then that reader will then say okay give me the path as a string the reason why I want to say is selected file path is because there are two different if I'm getting an image I for an image I can pass in the source as is just like here so I'm passing the selected file part as is on the image viewer and then on the PDF viewer you'll see that I have a selected file base64 and that one is um component and that one if you look at the code the selected base64 I'm only getting the actual um encryption of the base64 string so I'm getting the first part and I'm I'm ignoring the the first part of PDF um or application PDF and whatnot so I I just ignore those parts and then uh depending on whether it is an image or it's not if it's an image uh just set the PDF is image through which then will show the image viewer and then if it is a document it will come here and then show the document viewer and that's it so we're gonna save this in action and let's see why is the side breaking what's going on it should have picked up by now not everything is fine so let me just uh build this just my PC is not picking up what's going on in this PC now so let's see well that doesn't help close ngpf is a non-element so let me see on my module might need to import this guy GX PDF module save that and this guy into declarations right so we added that guy so now everything is happy we are happy and we are happy right so now I can grab this a PC is taken wherever I don't like this why are you taking Ramadan cool now we know and you have an issue so run again because we are missing this module now that we have it everything is happy and it should build with no errors building building building and we'll come on you can do better than that you can do better than that install this PC show and to button um all right so now it came back remember that everything is fine right so let's first foreign PDF viewer and a button to actually um choose a file from our file system and upload that and view it which is super cool boom now we there are we there now we're here first right and gpdf viewer we have that now let's choose far okay so let's choose a PDF another ipsum open that guy boom now we have a PDF this looks good and um let's open say image it's pretty good watch out for spring boot guys now we have to which is nice and let's choose a PDF blue I can toggle any file and that's super good and what makes it super nice is that I'm only taking base64 so the file is a string and that string you can then pass to a web service you can pass that and stream you can actually take that to your back end or C sharp Java wherever you can take that string into the service and then you can um pass the base64 into a file objective uploading to an FTP then that file object you can then do a file writer into your server to onto your local machine then that's how easy it is and I'm done with file the PDF viewer and please do guys subscribe and like do comment see some more cheers guys thanks bye [Music] let's go

Channel: Cypcode Studios

Views: 11,486

Keywords:

Id: ulNSwbMuzLI

Length: 19min 27sec (1167 seconds)

Published: Fri Oct 14 2022