Bobcares

WeSupport

Call Us! 1-800-383-5193
Call Us! 1-800-383-5193
Call Us! 1-800-383-5193

Need Help?

Emergency Response Time custom

Our experts have had an average response time of 12.45 minutes in December 2020 to fix urgent issues.

We will keep your servers stable, secure and fast at all times for one fixed price.

Printing with Ionic Application based on Angular – How we do it

by | Dec 21, 2020

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.

PREVENT YOUR SERVER FROM CRASHING!

Never again lose customers to poor server speed! Let us help you.

Our server experts will monitor & maintain your server 24/7 so that it remains lightning fast and secure.

GET STARTED

var google_conversion_label = "owonCMyG5nEQ0aD71QM";

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Related Posts

Categories:

Tags: