HTML TO PDF IN IONIC 4 | PDF GENERATOR IN IONIC

Share the post

PDF generation using Ionic Cordova framework

Hello All, Today we will discuss how to generate pdf from HTML in Cordova Ionic 4 framework? Ionic Cordova pdf generation is a very important concept in modern ionic applications. If you want to generate pdf using HTML then this tutorial will help you. We will use the Cordova plugin cordova-pdf-generator to generate pdf from HTML. This plugin will also help you to share the pdf with other applications. Please find below the steps to implement the same in the ionic 4 application.

Steps to follow for generating HTML To PDF In IONIC

1.Create new page by using following command by using command line interface

ionic g page PAGE_NAME_HERE

2. Install the plugin & dependency

We are going to use cordova-pdf-generator plugin to implement the functionality HTML to pdf conversion. To install the plugin & dependency write the following commands in CLI or Terminal in VS code.

ionic cordova plugin add cordova-pdf-generator
npm install @ionic-native/pdf-generator

3. Add dependency in app.module.ts as shown below

import { PDFGenerator } from '@ionic-native/pdf-generator/ngx';

providers: [
    StatusBar,
    SplashScreen,
    PDFGenerator,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],

After adding above dependency, The app.module.ts will look like this

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http';
import { PDFGenerator } from '@ionic-native/pdf-generator/ngx';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    PDFGenerator
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Write the HTML file as shown below.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic List Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">


  <ion-item>
    <ion-label>
      <h2> HTML TO PDF </h2>
    </ion-label>
  </ion-item>

  <ion-item>
    <ion-button (click)="getPDF()">Convert to PDF</ion-button>
  </ion-item>

</ion-content>

Here, We are only showing one button to convert our HTML into PDF. On button click we are going to call one function getPDF() which will give us PDF from HTML.

5. Write ts file to implement getPDF() function

import { Component } from '@angular/core';
import { PDFGenerator } from '@ionic-native/pdf-generator/ngx';
import { resolve } from 'url';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  htmlSample: any;

  constructor(private pdfGenerator: PDFGenerator) {

  }

  getPDF() {

    this.htmlSample = "<html><h1>Converted from HTML</h1></html>";
    let options = {
      documentSize: 'A4',
      type: 'share'
    }

    this.pdfGenerator.fromData(this.htmlSample, options).
      then(resolve => {
        console.log(resolve);

      }
      ).catch((err) => {
        console.error(err);
      });
  }


}

As shown in the above example, We have taken a simple HTML string htmlSample which contains one header tag having the value “Converted from HTML“. After clicking on the button, we are calling getPDF() method which calls the inbuilt method of plugin fromData(HTML, options). However, We can also use fromURL(URL, options), but we need URL here instead of HTML.

This fromData(HTML, options) method requires two-parameter. One is HTML & other is Options. We pass the HTML string htmlSample as a first parameter & options as a second parameter. Options contain the basic properties of documentSize, type. We taking type as a share to handle the further process by OS. This fromData(HTML, options) method requires two-parameter. One is HTML & other is Options. We pass the HTML string htmlSample as a first parameter & options as a second parameter. Options contain the basic properties of documentSize, type. We taking type as a share to handle the further process by OS.

Now, If we click the convert to pdf button. System will call getPDF() method which gives us following output.

html_to_pdf_output
Output

Must Read :

Leave a Comment