Welcome folks today in this blog post we will be using the ng2-pdf-viewer
library to render pdf documents
in browser using typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to install the below library using the npm
command as shown below
npm i ng2-pdf-viewer
And after that you need to copy paste the below code inside the app.module.ts
file as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; import { PdfViewerModule } from 'ng2-pdf-viewer'; @NgModule({ imports: [BrowserModule, PdfViewerModule], declarations: [AppComponent], bootstrap: [AppComponent] }) class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule); |
As you can see we are importing the module
and then we are adding it inside the imports
array. Now we need to copy paste the code inside the app.component.ts
file as shown below
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { Component } from '@angular/core'; @Component({ selector: 'example-app', template: ` <pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;" ></pdf-viewer> ` }) export class AppComponent { pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf"; } |
As you can see we are rendering the pdf
document component library and inside it we are providing the src
attribute and also we are providing the url
of the pdf document