Printing with Ionic 5, Ionic Native 5 and Cordova

Printing with Ionic 5, Ionic Native 5 and Cordova

In this post we will give you information about Printing with Ionic 5, Ionic Native 5 and Cordova. Hear we will give you detail about Printing with Ionic 5, Ionic Native 5 and CordovaAnd how to use it also give you demo for it if it is necessary.

Throughout this tutorial we are going to learn how to use printing in Ionic 5 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 v5 then lucky for you printing to either of these mobile platforms is a matter of using a Cordova plugin for printing

Ionic 5 uses Ionic Native 5 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 above.

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

Create an Ionic 5 Project and Add an Android Platform

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

ionic start ionic-printing-example blank --type=angularcd ionic-printing-exampleionic 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

Adding the Cordova Printing Plugin

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

cordova plugin add

Using the Printing Plugin with Ionic 5

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';@Component({selector: 'page-home',templateUrl: 'home.html'})export class HomePage {constructor(public navCtrl: NavController) {}print(){        Printer.isAvailable().then(function(){            Printer.print("").then(function(){            alert("printing done successfully !");            },function(){            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  (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, we have seen how to use the Cordova Printing plugin with Ionic 5, and Ionic Native. For more information about the printing plugin visit its GitHub repo. You can also visit the Ionic Native documentation here.

You can find this project in GitHub.

Hope this code and post will helped you for implement Printing with Ionic 5, Ionic Native 5 and Cordova. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US