PDF in Ionic projects (AngularJS)

Overview

Ionic is an HTML 5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that have access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code.
Ionic comes with very native-styled mobile UI elements and layouts that you’d get with a native SDK on iOS or Android but didn’t really exist before on the web. Ionic also gives you some opinionated but powerful ways to build mobile applications that eclipse existing HTML5 development frameworks.
Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or PhoneGap in order to run as a native app. We strongly recommend using Cordova proper for your apps, and the Ionic tools will use Cordova underneath.

About

We will cover "How to create and display PDF files using the JavaScript pdfmake and PDF.js and Cordova libraries fileOpener, whiteList, file". I will also explain the code and libraries I choose.

The complete source code of this example is here on GitHub.

Important Note:

**This project will produce output on physical device, as cordova performs its execution on actual devices and not on browser or on Emulators.

So execute this project on android and make sure it has Acrobat Reader for PDF display.

JavaScript Libraries and Cordova Plugins

JavaScript Libraries

PDFMake

PDFMake

Built on top of pdfkit
Define document layout in JSON
Support for tables out of the box

Cordova Plugins

cordova-plugin-file-opener2
cordova-plugin-whitelist
cordova-plugin-file

Angular Libraray

angular-utf8-base64

For the sake of keeping this tutorial short and to the point, we'll just use some random data for the invoice using chance.js. In a real-life app, you'll get that data from user input or a service.

What we are creating?

Create Project

We can create Ionic project in 2 ways:

1) Through IONIC Creator (Here)

(Ionic creator is very useful and easy to use prototyping tool to create UI templates for IONIC projects. It allows to implement basic routing through pages, style class and various layout of templates in quick time. We can create and download the project from IONIC creator through IONIC CLI tool, ZIP file format, Package or in Mobile app to device)

2) Through command prompt as follows:
Go to your command line and start a new ionic app:

ionic start PdfInIonic tabs
cd PdfInIonic

ionic serve

Copying files

bower install pdfmake angular-pdf chance --save
bower install ngCordova
bower install ngstorage
bower install chance
bower install angular-base64
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-opener2
cordova plugin add cordova-plugin-whitelist

Also, add new ".js" file as ng-cordova.min.js (copy from here)

Modify Index.html

After adding plugins from above list, make the entry of these librearies into index.html, so your index.html file should look like following:

<script src="lib/ionic/js/ionic.bundle.js"></script>

    
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="lib/ngstorage/ngStorage.min.js"></script>
    <script src="lib/angular-base64/angular-base64.js"></script>
    <script src="lib/pdfmake/build/pdfmake.js"></script>
    <script src="lib/pdfmake/build/vfs_fonts.js"></script>
    <script src="lib/pdfjs-dist/build/pdf.js"></script>
    <script src="lib/angular-pdf/dist/angular-pdf.js"></script>
    <script src="lib/chance/chance.js"></script>
    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
    
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    <script src="js/routes.js"></script>

Adding platform to project

**After above steps, add platform to project, as sometimes code related to cordova doesn't work due to adding platform before adding plugins.

ionic platform add android

Modify app.js

Add injectors to app.js for plugins as follows:

angular.module('starter', ['ionic','ngCordova', 'starter.controllers', 'starter.routes', 'starter.services', 'ngStorage', 'pdf'])

Create template

Add following code to create basic structure for UI

<html> <head></head> <body> <ion-view view-title="Dashboard"> <ion-content class="" ng-controller="createPDF"> <div> <form class="list " id=""> <label name="date" id="date" class="item item-input item-floating-label "> <span class="input-label">Date</span> <input placeholder="Date" type="date" ng-model="date"> </label> <label name="particulars" id="Particulars" class="item item-input item-floating-label "> <span class="input-label">Particulars</span> <input placeholder="Particulars" type="text" ng-model="particulars"> </label> <label name="amount" id="createNewBill-input6" class="item item-input item-floating-label "> <span class="input-label">Amount</span> <input placeholder="Amount" type="number" ng-model="amount"> </label> <button class=" button button-positive button-block " id="addToStorage" style="border-radius:10px 10px 10px 10px;" ng-click="addStorage(date, particulars, amount)">Add To Storage</button> <button class=" button button-positive button-block " id="createPDF" style="border-radius:10px 10px 10px 10px;" ng-click="createPDFFromStorage()">Create PDF</button> </form> </div> </ion-content> </ion-view> </body> <script id="pdf-viewer" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <button ng-click="removeModal()" class="button button-icon icon ion-android-close"></button> </ion-header-bar> <ion-content> <ng-pdf ng-if="pdfUrl" template-url="templates/viewer.html" canvasid="pdf" scale="page-fit"></ng-pdf> </ion-content> </ion-modal-view> </script> </html>

Create services in services.js

Lets create Service for adding values to local storage and getting back.

// New factory for localstorage

.factory ('StorageService', function ($localStorage) {

$localStorage = $localStorage.$default({
    things: []
});

var _getAll = function () {
    return $localStorage.things;
};

var _add = function (date, particulars, amount) {
    //creating final structure
    var data =
    {
      date,
      particulars,
      amount
    }
    //pushing to local storage
    $localStorage.things.push(data);
}

return {
      getAll: _getAll,
      add: _add
      //remove: _remove
    };
})

Create controller and functions in controllers.js

Add base64 injector in controller to generate PDF, as follows

angular.module('starter.controllers', ['base64'])

Also **if want to include image to PDF, need to convert it into base64 as show below in code.

**angular.module('starter.controllers', ['base64'])

.controller('createPDF', function($scope, $filter, $ionicModal, $base64, $cordovaFileOpener2, $ionicPlatform, $cordovaToast, StorageService, $ionicListDelegate, $cordovaFile, $cordovaFile, $cordovaEmailComposer, $state){

Run it

That's it! Run the code on physical device. If after "Allow"ing app permissions, pdf doesn't open then look for pdf in acrobat reader, sometimes it doesn't launch pdf in beginning.

(Make sure you have acrobat reader app in your device)

Happy Coding!!

Girish D. Fuluskar

Search This Blog