File preview in Angular | Open document URL like .doc, docx, .xlsx, .ppt, .pdf and images in Angular

hello everyone welcome to Tech world with MJ this is murari so in today's session I will show you how you can review the file like Word file PDF images when I'm saying Word file authorities means dot tocx docs PPT XLS ATC so with the help of iframe in angular we can preview this particular file so for you have clarification for PDF and images it is not required to use any external library or code because the browser is by default support to open this PDF or images but for Doc file I mean word file uh we will just have either any external library or we have the code that is basically used to support to open the word file in browser for that we have to do something okay so if you are creating your project newly then you might have uh sometime this uh the error like script execution disabling or enabling uh issue so for that you can just go and uh execute this particular commands otherwise uh you will skip the first point and then second point is as usual and Z new first project we create the first project this is a project name another one is change the project directory and the last one is run whatever application you have created okay so this is the basic command that you need to consider okay so in my case I have already created the project so I will just start from the uh project okay so for angular overview a command overview view you can follow the command here as well this is the official side of angular that's why you can go and check out this so the npm install is basically uh the command that you need to run in your applications to execute any commands of angular okay and after that in the angular NG new project CD chain directory so it means once you will click uh create this particular project so you will have to uh go inside that project location so CD that project name means uh you you should have to enter that particular project location then you will just go and NG serve or NG server so there are difference between and this serve and and this server is when you will click on NG cell I mean execute it the NG server then it will provide you a URL but that URL you will need to manually uh input in your browser either in it is in uh the Microsoft is or uh the Chrome browser but in case of NG sub o so it means it will open directly uh whatever or default browser is available in your system so let's come in the directly coding okay so I have created this particular project with this command okay the first command I have executed NG new my first project so instead of my first project I have uh given the name called file preview and uh then I have changed the directory so I will show you everything like Ctrl c means here you can see I am under the file preview directory okay so this is angular file preview this is the root folder I will show you in my drive here so if you can go in your drive so here I have created a folder called angular file preview demo and inside I have created a project file paper Okay so that I have already created so I will now not go to create the new project again okay so we'll go and start the further things so here I will just go and run that NG serve o so and these are o means it will open uh this particular link after building your application in whatever browser is by default available in your system okay so in my case the default browser is uh Microsoft is that's why it has opened that particular URL so this URL is global URL which is run over 4200 okay so it is open here so but in currently there's nothing here in the page because I have cleared everything so currently I I haven't created any new component I have just used the by default component when you will create that particular projects you you will have app component Pieces by default so I currently I'm using that particular component so in your scenario uh if you want to create the new component so you will have the command for new Creations or you can use that particular commands to create the new component but in this demo I will use that uh whatever by default command we have so here you can see I have cleared everything from the HTML okay so nothing not any code is written here and uh here is also I have cleared everything so instead of writing code one by one I have already written the code I will just copy and paste and it will explain you everything so don't worry about so I will just copy and will paste in our PS5 app component dot TS file so as I already told you for this code there is no any external library is required I have just detailed the code and that code will perform the file opening and reviewing activities so here you can see this is a by default angular Library there is no external Library here and for the further I will explain you what code I have written okay so this is uh the TS code and another we have to use this code in our STM so I will explain you it's very easy I will explain you one by one so here I will just paste it and save now will come on our PS5 so here uh you're already familiar with this particular uh code so this is just importing the library this is the selector selector and temp URL and style URL okay now we'll come here so this is the class app component class inside uh we'll have the URL so this is a online URL that is basically uh for the word document okay so I have I have put in that URL so here you can see this is the uh dot talk command uh we will have another top called Excel so this is the Excel dock then you will open in your browser this particular URL so it will uh not open in your browser it will directly download so you can go and check that particular URL for uh Excel and another is PPT so basically uh the code and any external library is required for uh office files not uh very much required for a PDF or images because I already told you uh the PDF and images is by default features of the browser that will be open over there but for talk action PPD this type of Office document you must have to use an external library or code okay so here you can see this is not a complete uh doc file URL here you can see HTTP view.office.live.com so from HTTP to so in this in this URL here you see so from the HTTP 2 here till equal to is a base URL that we must have to use for open your file on the office viewer okay so here you can see this here also and here with the PPT also I'm using HTTP view.opius.live.com so till equal to this is the base URL that is basically used to open your old document over or office I mean Microsoft Office server okay and after that you will have your actual URL so from HTTP to here this is your actual URL for pptx and from here to here this is actually URL for excel and from here to and this is the actual URL for talk okay so please be clear about that so till equal to this is the office talk URL which is basically used to open this document okay now here you can notice with the uh inside the URL PDF I haven't used that office uh view.office.live.com the reason behind is this URL will just open in the browser there is no any external library or server is required to open that's why uh this just a URL uh nothing else with that okay so this is the variable that variable will return a particular URL so I have created this particular method so according to your scenario you can create it but it is just for your understanding I have created this particular method and here it is in case of doc I mean we are using the switch case so in case of dock we will return the dock file in case of excel we will return the XLS file in case of PPT we will return the PPT file and in case of PDF we will return the PDF that it's and in case of default we will just the top file so that it's in terms of TS so you just need to consider this particular variable URL same because this variable we are using in our HTML component okay so here you can see uh so it is just for the understanding not any logical things here because uh just uh showing a button when you will click on Doc then it will open a doc file when you will click on Excel or PPT or PDF it will open that particular file okay so but the main things that you need to consider is here so I have used the iframe so iframe is not any external Library it is just a property of angular here inside the SRC I'm using URL save so URL save that variable we have initialized in our TS class okay so that it's here I have provided uh how looks our frame is I mean it is depend on you so currently I'm using the width 1100 pixels and height 500 pixels you can change according to your requirement as well it is just for the height and width of the file previewer okay now everything is looks okay I have saved this work done with just cool and check in our default browsers okay so here you can see uh because currently I'm using doc Excel PPT and PDF so here you can see dot action PPT and PDF okay and this method I have written in our TS class and uh I am passing the type of document and that document is validated which type of URL is required and that URL will be available on your iframe and that iframe will be open a document so the in the first case I am click on and by default the dock is load so now uh here you can just scroll this document and you can see everything in your document okay in in another case if you will click on Excel so that Excel here you can see that multiply access that we are using as a URL in our code another one is PPT so the PPT will take some time to load okay so 50 PPT is loaded here you can see the nine presentation is there okay you can go and click on this to see the PPT and another one is PDF so for PDF there is no any extra activities doing here it is just opening inside the iframe okay so the basically you need to consider for dog action upd and other than this top Excel and PPT if you will have some other extensions of Word file you can use here there is no any issue just one thing I would like to show because uh in our code as a base URL we have used the office Q DOT office tabs.live.com so this is the server this is the server which is provided by Microsoft over there this particular document is opening so how you will able to understand so when you will go and expand this particular document when you will click on this full screen okay so here you can see HTTP view office dot live uh.com okay so here you can see this but base URL is I mean extend it with that particular URL which you are using so in in case of excel as well when you will click on this button so here you know you can see the HTTP view.office.live.com this is the base URL and whatever the URL is used for that particular Excel is available online so this is the things that you need to consider in case of loading Your Word file or document with the help of if I'm in angle so that it's uh for this reasons if you feel this video is not helpful then please subscribe our Channel and like and share with your friends okay foreign

Channel: TechWorld with MJ

Views: 5,956

Keywords: File preview in Angular, Angular, Angular16, filepreview, wordfile, Microsoft Word, Open document URL

Id: oKQYW9xspzM

Length: 14min 21sec (861 seconds)

Published: Tue Jun 27 2023