Header Ads Widget

Ticker

6/recent/ticker-posts

Impresión con Ionic 5, Ionic Native 5 y Cordova

 A lo largo de este tutorial, aprenderemos cómo usar la impresión en aplicaciones Ionic 5 basadas en Angular usando Ionic Native y Cordova.

Si necesita crear una aplicación móvil para Android o iOS que necesite imprimir datos en PDF o documentos usando el marco Ionic v5, entonces, por suerte, imprimir en cualquiera de estas plataformas móviles es una cuestión de usar un complemento Cordova para imprimir.

Ionic 5 usa Ionic Native 5 para envolver los complementos de Cordova, por lo que en este tutorial veremos un proyecto de ejemplo que le muestra cómo implementar la funcionalidad de impresión para imprimir en un archivo PDF o en papel.

Debe saber que la impresión solo está disponible para Android 4.4.4 o superior.

Asegúrese de haber configurado los ajustes para usar la impresora tanto en dispositivos Android como iOS.

Cree un proyecto Ionic 5 y agregue una plataforma Android

A continuación, abra su terminal en los sistemas Linux / MAC o el símbolo del sistema en Windows y genere un nuevo proyecto Ionic 5:

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

Si está desarrollando su aplicación en un sistema operativo MAC, también puede apuntar a iOS con el siguiente comando:

ionic platform add iOS

Agregar el complemento de impresión de Cordova

Ahora necesitamos agregar el complemento Cordova para imprimir, así que continúe y ejecute el siguiente comando:

cordova plugin add https://github.com/katzer/cordova-plugin-printer.git

Uso del complemento de impresión con Ionic 5

A continuación, utilice su editor de código favorito para abrir src/pages/home.tsy luego agregue el siguiente código para probar la impresión:

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("https://www.techiediaries.com").then(function(){
            alert("printing done successfully !");
            },function(){
            alert("Error while printing !");
            });
        }, function(){
        alert('Error : printing is unavailable on your device ');
        });

}

}

A continuación, agregue un botón para imprimir en su home.htmlplantilla

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

Asegúrese de haber conectado su dispositivo móvil real con un cable USB y luego cree y ejecute su aplicación para Android usando el siguiente comando:

ionic run android 

Conclusión

Este es el final de este tutorial, hemos visto cómo usar el complemento Cordova Printing con Ionic 5 e Ionic Native. Para obtener más información sobre el complemento de impresión, visite su repositorio de GitHub . También puede visitar la documentación de Ionic Native aquí .

Puedes encontrar este proyecto en GitHub .

Publicar un comentario

0 Comentarios