Are you trying to perform printing in an Ionic application?

This guide will help you.

Ionic is focused mainly on the look and feel, and UI interaction of your app.

Here at Ibmi Media, as part of our Server Management Services, we regularly help our Customers to perform Application related queries.

In this context, we shall look into how to use printing in Ionic apps.

The process of Printing with Ionic Application?

Now, we shall see the steps to 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, trying to do printing with Ionic apps? – Our Technical experts can help you.]