Print Data To Paper Or PDF Using Ionic Framework

Have you ever built an app that has heavy content that might need to one day be printed to a PDF or to paper? Maybe you’re building the next great email or news app, both of which have an expectation that you should be able to print what you’re reading.

Both iOS and Android have printing functionality. We are using Ionic Framework, and lucky for us, printing to either of these platforms couldn’t be easier when we use the Apache Cordova Printer Plugin by Sebastian Katzer.

Before starting this tutorial it is important to note that printing is only available on Android devices that have OS 4.4.4 (KitKat) or higher. To print to a printer on both Android and iOS, it must first be configured in your devices settings.

Let’s start by creating a new Ionic Android and iOS project:

ionic start IonicExample blank
cd IonicExample
ionic platform add android
ionic platform add ios

It is important to note that if you’re not using a Mac, you cannot add and build for the iOS platform.

At this point we are ready to install the base Apache Cordova plugin. This can be done by running the following from your command prompt or terminal:

cordova plugin add https://github.com/katzer/cordova-plugin-printer.git

Technically, we can now start using the plugin in our app. Like with most plugins, they cannot be tested from a web browser because they use native device code.

Before we go any further, we are going to include the AngularJS extension set, ngCordova into our application. We are doing this because it makes life incredibly easy when handling plugins in Ionic Framework applications.

Because ngCordova is still alpha, I encourage you to not download the latest version when following this tutorial. Although it could work, there are still chances breaking changes were introduced after I wrote this article. Instead, download commit 9b05b6 from the GitHub repository since it is the version I’m using.

Extract ng-cordova.min.js into your project’s www/js directory. With the library file include in your project structure, open your www/index.html file and include the following above the cordova.js line:

<script src="js/ng-cordova.min.js"></script>

It is very important to include ngCordova above the cordova.js line, otherwise you’re going to get strange results. The final thing we need to do in order to have ngCordova working correctly in our project is to make a small change to the www/js/app.js file’s angular.module function:

var ionicApp = angular.module('starter', ['ionic', 'ngCordova']);

We are now ready to get down to business. Create the following ExampleController in your www/js/app.js file:

ionicApp.controller("ExampleController", function($scope, $cordovaPrinter) {

    $scope.print = function() {
        if($cordovaPrinter.isAvailable()) {
            $cordovaPrinter.print("https://www.nraboy.com");
        } else {
            alert("Printing is not available on device");
        }
    }

});

The $scope.print function will first check to see if printing is available on the device. It will only be available on iOS devices with AirPrint and Android 4.4.4+ devices. If available, $cordovaPrinter.print will attempt to print my personal profile remote website http://www.nraboy.com.

To use this controller and function, open your www/index.html file and add the following:

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="print()">Print Webpage</button>
</ion-content>

Don’t be fooled. This plugin can print beyond just remote web pages. Instead of passing in a URL, you can also pass in a string of HTML code. There are actually a bunch of other options you can pass:

If you plan to pass options, you would just overload the function like $cordovaPrinter.print(src, options). More documentation can be found on the plugins GitHub page.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.