Printing with Ionic 4

Throughout this tutorial we are going to learn how to use printing in Ionic 4 apps based on Angular using Ionic Native and Cordova.

If you need to build a mobile app for Android or iOS that needs to print data to PDF or papers using the Ionic framework then lucky for you printing to either of these mobile platforms is a matter of using a Cordova plugin for printing

Ionic 4 uses Ionic Native to wrap Cordova plugins so in this tutorial we are going to see an example project that shows you how to implement printing functionality to either print to PDF file or paper.

You need to know that printing is only available for Android 4.4.4 (or KiKat).

Make sure you have configured the settings to use the printer on both Android and iOS devices.

Next open up your terminal under Linux/MAC systems or the command prompt under Windows and generate a new Ionic 3 project:

ionic start ionic4-printing-example blank --type=angular
cd ionic4-printing-example
ionic platform add android

If you are developing your app under a MAC OS you can target iOS too using the following command:

ionic platform add iOS

Now we need to add the Cordova plugin for printing so go ahead and run the following command:

cordova plugin add

Next use your favorite code editor to open the src/pages/home.ts and then add the following code to test printing:

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

import { NavController } from 'ionic-angular';

import {Printer, PrintOptions} from 'ionic-native';

selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {

constructor(public navCtrl: NavController) {


            alert("printing done successfully !");
            alert("Error while printing !");
        }, function(){
        alert('Error : printing is unavailable on your device ');



Next, add a button to print in your home.html template

   <button class="button" (click)="print()">Print</button>

Make sure you have plugged you real mobile device using an USB cable then build and run your app for Android using the following command:

ionic run android 


This is the end of this tutorial. For more information about this plugin visit its GitHub repo. You can also visit the Ionic Native documentation here.

You can find this project in GitHub.

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status