Ionic 7 Angular Create, Export and View PDF File Tutorial

Last Updated on by in Ionic

In this thorough step-by-step example, we will explain how to create, export, and view PDF files in the Ionic Angular application.

We will take the help of File, File Opener 2, jsPDF, DOM to Image, and Ionic native & Cordova File Opener plugins.

On top of that, we will create a static data table, pour some dummy data into it using HTML markup.

This will help us create a PDF viewer in the Ionic app. Furthermore, we will show you how to create and display PDF file and also how to open the PDF file in an Ionic app.

We will certainly take the assistance of the node package manager (npm), Ionic native, and Cordova registry to add the third-party dependencies to create a PDF viewer in the Ionic ecosystem.

Let us understand about the plugins and packages we are employing in this Ionic PDF viewer tutorial.

The jsPDF is an awesome library primarily used to generate PDFs in JavaScript, and it is available through npm.

Whereas, the dom-to-image is a JavaScript library that helps in converting a self-willed DOM (document object model) node into a vector (SVG) or raster (PNG or JPEG) image.

Likewise, the File Opener plugin allows you to open a file on your device file system with its default application.

Ionic Export to PDF File Example

  • Step 1: Setting Up Ionic App
  • Step 2: Install NPM, Ionic Native and Cordova Plugins
  • Step 3: Register File, FileOpener in App Module
  • Step 4: Create Static Data Table
  • Step 5: Export and Display PDF File in Ionic
  • Step 6: Start Ionic Angular App

Setting Up Ionic App

Ionic app development begins by installing Ionic command-line-interface on your system:

sudo npm install -g @ionic/cli

You are ready to install a blank new Ionic Angular app:

ionic start ionic-test-app blank --type=angular

Move to app root:

cd ionic-test-app

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,

Install NPM, Ionic Native and Cordova Plugins

Let us start installing jsPDF, DOM to Image, and Ionic native & Cordova File, File Opener and Ionic native core plugins into the Ionic app using the given recommended commands:

npm i cordova-plugin-file-opener2
npm install @ionic-native/file-opener --legacy-peer-deps
npm i cordova-plugin-file --legacy-peer-deps
npm install @ionic-native/file --legacy-peer-deps
npm i @ionic-native/core --legacy-peer-deps
npm install dom-to-image --legacy-peer-deps

npm install @types/dom-to-image --legacy-peer-deps
npm install jspdf --legacy-peer-deps

npm install @types/jspdf --legacy-peer-deps

Register File, FileOpener in App Module

The File and FileOpener modules have to be added into the main app module class, hence update the app.module.ts file as suggested.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// Add modules
import { File } from '@ionic-native/file/ngx';
import { FileOpener } from '@ionic-native/file-opener/ngx';

  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
  bootstrap: [AppComponent],

export class AppModule {}

Create Static Data Table

To export to PDF in Ionic, we have to create a static responsive HTML table, add user data inside it, create a button to bind the createPdf() function with it, and display HTML into PDF view.

Place code in file:

      Ionic HTML to PDF
    <ion-buttons slot="primary">
      <ion-button color="danger" fill="outline" (click)="createPdf()">
        View PDF

<ion-content padding>
  <div class="print-pdf">
    <div class="print-wrapper" id="print-wrapper">
            <th>First Name</th>
            <th>Last Name</th>
            <td data-column="First Name">James</td>
            <td data-column="Last Name">Matman</td>
            <td data-column="Job Title">Chief Sandwich Eater</td>
            <td data-column="First Name">Andor</td>
            <td data-column="Last Name">Nagy</td>
            <td data-column="Job Title">Designer</td>
            <td data-column="First Name">Tamas</td>
            <td data-column="Last Name">Biro</td>
            <td data-column="Job Title">Game Tester</td>
            <td data-column="First Name">Zoli</td>
            <td data-column="Last Name">Mastah</td>
            <td data-column="Job Title">Developer</td>
            <td data-column="First Name">Szabi</td>
            <td data-column="Last Name">Nagy</td>
            <td data-column="Job Title">Chief Sandwich Eater</td>

Export and Display PDF File in Ionic

Import JSPDF, domtoimage, FileOpener, File, and IWriteOptions, thereafter inject File, and FileOpener into the constructor() method.

We will display a loader with the custom message while the PDF file is generating, the jsPDF is highly customizable, and you can check more of its properties here.

Place code in and save the file:

import { Component } from '@angular/core';

import JSPDF from 'jspdf';
import domtoimage from 'dom-to-image';
import { FileOpener } from '@ionic-native/file-opener/ngx';
import { File, IWriteOptions } from '@ionic-native/file/ngx';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {
  constructor(private file: File, private fileOpener: FileOpener) {}

  createPdf() {
    const pdfBlock: any = document.getElementById('print-wrapper');

    const options = {
      background: 'white',
      height: pdfBlock.clientWidth,
      width: pdfBlock.clientHeight,

      .toPng(pdfBlock, options)
      .then((fileUrl) => {
        var doc = new JSPDF('p', 'mm', 'a4');
        doc.addImage(fileUrl, 'PNG', 10, 10, 240, 180);

        let docRes = doc.output();
        let buffer = new ArrayBuffer(docRes.length);
        let array = new Uint8Array(buffer);
        for (var i = 0; i < docRes.length; i++) {
          array[i] = docRes.charCodeAt(i);

        const directory = this.file.dataDirectory;
        const fileName = 'user-data.pdf';

        let options: IWriteOptions = {
          replace: true,

          .checkFile(directory, fileName)
          .then((res) => {
              .writeFile(directory, fileName, buffer, options)
              .then((res) => {
                console.log('File generated' + JSON.stringify(res));
                  .open(this.file.dataDirectory + fileName, 'application/pdf')
                  .then(() => console.log('File is exported'))
                  .catch((e) => console.log(e));
              .catch((error) => {
          .catch((error) => {
              .writeFile(directory, fileName, buffer)
              .then((res) => {
                console.log('File generated' + JSON.stringify(res));
                  .open(this.file.dataDirectory + fileName, 'application/pdf')
                  .then(() => console.log('File exported'))
                  .catch((e) => console.log(e));
              .catch((error) => {
      .catch(function (error) {

Start Ionic Angular App

By default, the @ionic-native/core plugin is not available in our app’s package.json file.

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Testing the app on the emulator or real device is easy in Ionic; we have provided the instructions below to start the app on the emulator.

First, add the platform:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

Next, create the project build:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

Ultimately, start the application:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

Html to PDF in Ionic


PDF or Portable Document Format is a popular file format. Exclusively used for sharing electronic documents: Images, Invoices, Reports, Forms, and other essentials data.

This tutorial described how to create convert HTML markup into PDF File, export HTML to PDF File view using jsPDF, File Opener, and dom-to-image plugins.

We certainly believe you have liked our intensive efforts to enhance your knowledge in Ionic development.

Digamber - Author

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.