Welcome folks today in this blog post we will be displaying the google drive files from url in angular 14 using the ngx-doc-viewer library in typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to initialize a new angular project using the below command as shown below
ng new sampleapp
cd sampleapp
And now we need to install the below dependencies for the angular project as shown below
npm i ngx-doc-viewer
So as you can see we are installing the above dependency for the project. Now we need to include the library inside the project by copy pasting the below line inside the app.module.ts file inside your project as shown below
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxDocViewerModule } from 'ngx-doc-viewer'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgxDocViewerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
As you can see we are including the NgxDocViewerModule inside the imports array and also we are importing this module at the very top from the ngx-doc-viewer library.
And now you can copy paste the required html code for the angular app inside the app.component.html file as shown below
app.component.html
Add DocViewer to component:
Now we will be adding the docviewer component to render all the files from the url for google drive and other sites etc.
|
1 2 3 4 5 |
<ngx-doc-viewer [url]="doc" viewer="google" style="width:100%;height:50vh;" ></ngx-doc-viewer> |
So as you can see this component takes three arguments first will be the actual url of the document to embed inside the angular application this will can be anything it can also come from google drive. You can copy paste the url link that is hosted somewhere on internet. And then we have the different viewers available for this library here we are passing the standard google drive viewer to view the file and then also we are attaching the custom css to this viewer by providing the width and height to the viewer.
And now we can directly pass the url also by giving some value to it as shown below
|
1 2 3 4 5 6 |
<ngx-doc-viewer [url]="'https://drive.google.com/file/d/0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh/preview'" viewer="url" style="width:100%;height:50vh;" > </ngx-doc-viewer> |
As you can see we are now providing a static url of the file which is hosted on google drive and we are embedding it inside the url viewer component.
As you can see if you run the angular app it will load the actual file in this it is pptx file it can be anything it can be png,jpg image or it can be pdf file or it can be powerpoint presentation or it can be txt or docx file also.
For rendering the DOCX and PDF Files you will need a separate module for this you need to install the manmoth module using the below command
npm i manmoth
Now we need to add the below line inside the angular.json file of your angular project as shown below
|
1 2 3 |
"scripts": [ "node_modules/mammoth/mammoth.browser.min.js" ] |
Supported File Types
This is the list of file types along with extensions that this library can embed inside the angular project are as follows
- Text files (.TXT)
- Markup/Code (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
- Microsoft Word (.DOC and .DOCX)
- Microsoft Excel (.XLS and .XLSX)
- Microsoft PowerPoint (.PPT and .PPTX)
- Adobe Portable Document Format (.PDF)
- Apple Pages (.PAGES)
- Adobe Illustrator (.AI)
- Adobe Photoshop (.PSD)
- Tagged Image File Format (.TIFF)
- Autodesk AutoCad (.DXF)
- Scalable Vector Graphics (.SVG)
- PostScript (.EPS, .PS)
- TrueType (.TTF)
- XML Paper Specification (.XPS)
- Archive file types (.ZIP and .RAR)
