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.
Table of Contents
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

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

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