How To Export PDF and View with Ionic 4 & Angular

Another step by step guide working on IONIC4 + ANGULAR + CORDOVA how to export then view as PDF file using (DOM to IMAGE) with JSPDF / File Opener. This example can be implemented working on paperless projects for example if you have an app that the functionality is you don’t want to use a printer to see the reports generated from your app. the user can press a button then it will generate a PDF file then share to any apps like Facebook, Watsup, email, etc.

Requirements for this implementation

  1. Updates Node.js
  2. IONIC 4
  3. Cordova / Capacitor

Generating  a New Project Files

To generate a new project with ionic 4 & angular just type the command below.

Then there will be a question coming out from your screen during the installation, you just press N for no. then open the newly created project app folder. “ionic-prod-pdf”

Finalizing the project file to check if you successfully configure your working environment, you need to run the Ionic project to make it sure your configuration is working fine just type the command below. note: execute this command inside of your project directory.

Press Y to install (@ionic/lab) then the app preview will show on your screen.

Installing the DOM-To-IMAGE – jSPDF and File Opener

To use DOM-to-IMAGE javascript library type the following command below.

To install the jSPDF Javascript library, just follow and type the list of command below.

The dom-to-image and the jSPDF javascript library are installed and ready to use. now next is you need to install the Ionic 4 Native File Opener component just follow the command below

Open your file explorer and navigate the src/app/app.module.ts and add this @ionic-native/file-opener/ngx module.

Add that module to @NgModule providers.

Next is add the FileOpener @NgModule base code providers:[]

3. The Ionic HTML page for the page template

As our goal, we need to generate a page that can be printable and exportable to PDF format. now open your src/app/home/ and remove all code inside of the html file page and copy all the HTML tags below and phase to the src/app/home/

Open your src/app/home/ and copy all the CSS / SASS element to your src/app/home/

4. How to Export to PDF and Preview the Page

This step is to export the page to PDF file and preview using file opener. goto src/app/home/ and edit the then add this library to your ts file. Inject listed imports below to the constructor.

Add a list code below variables for the use of the loading controller before the constructor.

Add a function for presenting the loading controller below the constructor.

The code below is the typescript function that export and view the pdf file format.

Testing the IONIC app on our Virtual Device

Because we are using the Native plugin of Ionic 4 and Cordova, we should run on Device of Simulator to make the plugin working. Type this command to add Cordova platform.

Note: before we going to test the app in the Device Simulator it requires to generate a compatibility format so that, all required plugin will work without issues. just type the command below. if you wat to test it with iOS type > ionic cordova platform add ios and if you want to test it with Android ionic cordova platform add android

If you want to run the app directly to android or device jute enter the following command below.

In my case, I’ve got this error when running on the Android device.

If you encounter an error like ” Failed to execute aapt” or Build failed with an exception, just open ( platform/android/ ) then change the :

You should see this page when it’s running successfully.


Leave a Reply

Your email address will not be published. Required fields are marked *