Wondering how to use printing in an Ionic application? We can help you with it.

Here at Bobcares, we have seen several such App-related queries as part of our Development Services for developers.

Today, we will take a look at how to use printing in Ionic apps.

Printing with Ionic Application

Today, let’s see how our Engineers use printing in Ionic apps based on Angular using Ionic Native and Cordova.

Ionic uses Ionic Native to wrap Cordova plugins. Here we are going to see an example project that shows how to implement printing functionality to either print to PDF file or paper.

1.  Create a basic Ionic Angular app

First, we install ionic CLI using npm

Next, we create an Angular Ionic app using

$ ionic start print-demo blank --type=angular

2. Setup Printer Plugin

In order to set up the printer plugin, we install the following packages by executing the following commands

$ npm install cordova-plugin-printer
$ npm install @ionic-native/printer

3. Updating Application’s App Module

Now we import the Barcode module in the projects app.module.ts and then inject it inside the provider.

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Printer, PrintOptions } from '@ionic-native/printer/ngx';

import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
FormsModule
],
providers: [
StatusBar,
SplashScreen,

Printer,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }

4. Adding Printer to pages

To use the Printer plugin in component, we first import HTTP class then add in the constructor to use its methods and add the print function as below:

import { Component, OnInit } from '@angular/core';
import { Printer, PrintOptions } from '@ionic-native/printer/ngx';

selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
constructor(
public printer: Printer
) {}

print() {
this.printer.isAvailable().then((onSuccess: any) => {
let content = document.getElementById('printer').innerHTML;
let options: PrintOptions = {
name: 'MyDocument',
duplex: true,
orientation: "portrait",
monochrome: true
};
this.printer.print(content, options).then((value: any) => {
console.log('value:', value);
}, (error) => {
console.log('eror:', error);
});
}, (err) => {
console.log('err:', err);
});
}

Since we use getElementById, we have to define the id in HTML file and the data that is being present inside the id identifier will be printed or saved as PDF. Also, we add a button to print in the home.html template.

<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="ion-padding">
<div id="printer">
The world is your oyster.
</div>
</div>
<button class="button" (click)="print()">Print</button>
</ion-content>

The above function will print the content present inside the HTML Page.

5. Build and Test app on Android

Before adding a platform, it is necessary to build the Capacitor assets.

Here is the command we use to build web asset

$ ionic build

Now we add a new platform, Android

$ npx cap add android

Then we sync any changes done to the code in the platform, and then we open the default editor for building the app on the device.

npx cap sync

Finally, we open the project in Android studio

$ npx cap open android

[Still, finding any difficulty in printing with Ionic apps? – Our experts can help you]

Conclusion

Today, we learned how to use printing in Ionic apps based on Angular using Ionic Native and Cordova.