Angular 9 Render PDF Documents Using ng2-pdf-viewer Node Module

Angular 9 Render PDF Documents Using ng2-pdf-viewer Node Module

 

Hi friends today in this video i will be talking about how to render pdf documents using ng2-pdf-viewer Node Module. In this video i have illustrated a step by step approach on how to do this.

READ  jQuery FullCalendar Integration Using PHP MySQL & AJAX

 

Install

 

npm install ng2-pdf-viewer --save

 

Usage

 

Add PdfViewerModule to your module’s imports

 

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);

 

READ  Firebase Authentication in Twitter using Javascript - Coding Shiksha

After including the library we can use it inside our app component like this

 

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";
}

 

READ  jsPDF Vue js Generating Dynamic PDF from Form - Coding Shiksha

And now if you open the angular app you will see our pdf file rendered on the screen.

Leave a Reply