pdf_viewer

Ionic 5 PDF Viewer Example | Ionic 5 tutorial

by
Share the post

Hello All, In the last Ionic tutorial, We had discussed How to capture image in the Ionic react application. Now, In this tutorial, we will learn the Ionic 5 PDF Viewer example. We will create a pdf viewer with the help of the npm package ng2-pdf-viewer.

ng2-pdf-viewer will help us to show pdf inside our ionic application. It will provide this feature which can enhance the user experience.

Steps to create Ionic 5 pdf viewer example

Step1: Create a new Ionic project using the following command

ionic start myApp blank

After that select angular project instead of react.

Move the current directory to the project directory using the following command

cd myApp

Now, Open the newly create Ionic project in Visual Studio Code using the following command

code .

Step2: Install NPM dependency using the following command

npm install ng2-pdf-viewer --save

Step3: Copy any PDF file inside myApp/src/assets folder

Please see the below image for your reference

pdf location
pdf location

Step4: Import PdfViewerModule in home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { PdfViewerModule } from 'ng2-pdf-viewer';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    PdfViewerModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Step 5: Update home.page.html file as shown below

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <pdf-viewer src="assets/doc.pdf" style="width: 500px; height: 500px">
    </pdf-viewer>
  </div>
</ion-content>

After that, We can run the Ionic application using the below command

ionic serve

Output

output
Output

This is how we can create pdf viewer in the ionic 5 application.

Leave a Comment