ng111printer

Ng111printer

This package is created to bring a easy way to print on a thermal printer, our team were doing a research while a few week to find the way most direct to print from an Angular project but nothing good we got.

Then we have developing a lots projects that has the same request (C# has it to easy, so we developed an a simple driver that has an API to connect angular to printer, dont worry for hard instalation it is a simple service).

The best is it work with any printer that you have

Keep it mind:

• Just works on Windows
• For unistall is like an other program (Just enter in Windows' Control Panel) you'll find like win-printer-connector
• This driver will get all the printer that you have installed in your PC
• Just works on projects that run on the local host or where the server side is the same that the printer is installed

Here is the versions of it: (Just download and install, this package connected to it automatically)

https://drive.google.com/drive/folders/178ESWE-gsxYVKK-eqggs9EHgl2C7Tnsv?usp=share_link

Versión ng111printer	Versón win_connector
1.0.13	1.0.3
1.0.11	1.0.2
1.0.10	1.0.2
1.0.9	1.0.2
1.0.7	1.0.2
1.0.6	1.0.2

Install Windows driver conector

• Open the setup
• You have two ways to start service (Restart your PC or access to services app and find the service will name is WIN_PRINTER_CONECTOR rigth click and start).

Unistall Windows driver conector

• Access to Windows Control Panel
• Find the program WIN_PRINTER_CONECTORvX.X.X
• Click uninstall

How to use ng111printer

First you need to install the package using npm with, npm i ng111printer in the project where you want implement printing.

You need to import the library to the component where you going to use printing, you can make by this way import * as Ng111printer from 'ng111printer' and you will have access to all clases from library to construct you printing document.

What kind of contents can you use?

You can use texts, images, qr codes, bar codes, content in table structure, separator line, texts to the edges and vertical spacing. All this kind of content has its own styles, that are going to show in the example.

Usage example

In the component that you re going to implement print and once the library is imported, you can start to use the classes to print. First, there is a service function that find all the printers that are installed in your system, you can use by next way. In the constructor you declare a variable of ng111printer.ConectorPrinterService type as follows:

constructor(
    private conectorPrinterService: ng111printer.ConectorPrinterService
  ) { }

So inside a function you can use the solicitarListaImpresoras() method, this method return a promise, keep that in mind. This promise resolve the list of printers on your system that you can use in a select, for example.

    this.conectorPrinterService.solicitarListaImpresoras().then((printersList) => {
      let list = printersList.mensaje.split(',');
      //List is stored in a global variable
      this.printers = list;
    }).catch((error) => {
      console.log("Error in the printers request: ", error);
      return;
    });

So now that you know the name of your printer you can send a print object to it. Lets see how to print: First you create an object for the configuration of your printer.

let printerConfiguration: ng111printer.ConfImpresoraBtec = {
      //Name of printer to conect
      nombre: *you use the corresponding value to your thermal printer from the printers list*,
      //paper Height, could you use 0 value to ignore, the printer will get the default heigth available. Unit value is in mm
      altoPapel: 0,
      //paper width, you can use any number value, and you will limit the size. could you use 0 value to ignore. Unit value is in mm.
      anchoPapel: 0,
      //Margins, could you use 0 value to ignore, the printer will get the default margins available. Unit value is in mm.
      margenes: 0
    }

Then build the structure of the template to print where you can use the contents mentioned above:

let ticketTemplate = [
      //Logo has to be a base 64 image, the parameters of EstilosImagen means,(horizontal position, vertical position, width(pt), height(pt))
      new ng111printer.Imagen(logo, new ng111printer.EstilosImagen(ng111printer.AlineacionBtec.centro, 0, 100, 100)),
      //Simple text and the styles that can be used, all values are sugested using the corresponding enum
      //Parameter for EstilosTexto(typography, font size, horizontal align, text styles, font weight, overflow type)
      new ng111printer.Texto('Example text for Readme', new ng111printer.EstilosTexto(ng111printer.TipografiaBtec.lucidaConsole,ng111printer.TamanioBtec.mediana1,ng111printer.AlineacionBtec.centro,ng111printer.TipoBtec.italic,ng111printer.PesoBtec.bold,ng111printer.DesbordamientoBtec.palabras)),
      //Parameters of EstilosQr(height (pt), horizontal position)
      new ng111printer.Qr('Value for the QR code', new ng111printer.EstilosQr(100, ng111printer.AlineacionBtec.centro)),
      //Parameters for EstilosCodigo(height(pt), Boolean value that indicates if you want to show value under the code, horizontal position)
      new ng111printer.CodigoBarras('4857002503694', new ng111printer.EstilosCodigo(50, 0, ng111printer.AlineacionBtec.centro)),
      //Content in table, you can add the columns that you want inside the array
      new ng111printer.Tabla([
        //Parameters for Columna(The content type of column(texto, qr code, bar code, image), width and height of cell, horizontal align, vertical align of cell, cell value, styles)
        //Parameters for EstilosColumna(Content height, then the same styles for simple text)
        new ng111printer.Columna(ng111printer.TiposColumna.texto, 40, 30, ng111printer.AlineacionBtec.centro, ng111printer.AlineacionVerticalBtec.superior, '16/10/2021', new ng111printer.EstilosColumna(30, ng111printer.TipografiaBtec.lucidaConsole, ng111printer.TamanioBtec.extraChica,)),
        new ng111printer.Columna(ng111printer.TiposColumna.qr, 60, 30, ng111printer.AlineacionBtec.centro, ng111printer.AlineacionVerticalBtec.superior, '2877', new ng111printer.EstilosColumna(20)),
      ]),
      //Separator line parameters (the caracter to use as separator, and styles for separator that are the same as simple text)
      new ng111printer.Separador('*', new ng111printer.EstilosSeparador()),
      //Vertical spaces, you indicates the number of lines that want to separate
      new ng111printer.Espaciado(1),
      //Text to the edges in the same line, the parameters are (the text in the left, the text in the right, left column width, right column width, styles for left side text, styles for right side text), the text styles are the same as simple text
      new ng111printer.TextoExtremos('LEFT TEXT', 'RIGHT TEXT', 49, 50, new ng111printer.EstilosTexto1(), new ng111printer.EstilosTexto2()),
    ]

Once you have created the two previous object, you can construct the print object that is send to the printer.

let print: ng111printer.ImpresionBtec = {
    //Action that is executed in the WIN_PRINTER_CONECTOR plugin
    accion: ng111printer.AccionImpresion.imprimir,
    //Configuration for printer object
    confImpresora: printerConfiguration,
    //Template of what is going to print
    plantillas: ticketTemplate,
    //Number of copies of the template
    copias: 1
}

Now you can send the print object to the imprimir() function in the conectorPrinterService, this function evaluates the length of your bar codes and resolve with an object with error status code and a message when is empty or is longer than 15 characters, otherwise it resolve an object with ok status code and a message if there was conection with the WIN_PRINTER_CONECTOR socket, in case there is no connection resolve an error status code.

this.conectorPrinterService.imprimir(print).then((resp) => {
    console.log("Finished print", resp);
}).catch((error) => {
    console.log("Error printing.", error)
})

And it's done.

Example 2

/** Function to print an example  */
  imprimirTicket() {
    //Validation for selected printer
    if (this.impresoraSeleccionada == '') {
      console.log('Seleccione una impresora de la lista');

      return
    }
    //Object to store configuration of printer
    let configuracionImpresora: Ng111Printer.ConfImpresoraBtec = {
      //Nombre de la impresora a conectar
      nombre: this.impresoraSeleccionada,
      //paper Height, could you use 0 value to ignore, the printer will get the default heigth available. Unit value is in mm
      altoPapel: 0,
      //paper width, you can use any number value, and you will limit the size. could you use 0 value to ignore. Unit value is in mm.
      anchoPapel: 0,
      //Margins, could you use 0 value to ignore, the printer will get the default margins available. Unit value is in mm.
      margenes: 0
    }

    //Base64 image to print
    let bitmapLogo = 'replace with your image in base64';
    //Create styles for the image
    let estilosLogo: Ng111Printer.EstilosImagen = new Ng111Printer.EstilosImagen(Ng111Printer.AlineacionBtec.centro, -1, 100, -1);
    //Variable to create the image with the ng111printer.Imagen class
    let logo: Ng111Printer.Imagen = new Ng111Printer.Imagen(bitmapLogo, estilosLogo);

    //Styles for Qr code
    let estilosQr: Ng111Printer.EstilosQr = new Ng111Printer.EstilosQr(undefined, Ng111Printer.AlineacionBtec.centro);

    //Styles for the left side text on the TextosExtremos content
    let estilosIzqLO1: Ng111Printer.EstilosTexto1 = new Ng111Printer.EstilosTexto1(Ng111Printer.TipografiaBtec.consolas, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.izq, Ng111Printer.TipoBtec.regular);
    //Styles for the right side text on the TextosExtremos content
    let estilosDerLO1: Ng111Printer.EstilosTexto2 = new Ng111Printer.EstilosTexto2(Ng111Printer.TipografiaBtec.consolas, undefined, Ng111Printer.AlineacionBtec.der);

    //Template with the elements to print
    let plantillaTicket = [
      //111BTEC logo
      logo,
      //Ticket title
      new Ng111Printer.Texto('IMPRESIÓN PLUGIN Ng111Printer', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.centro, Ng111Printer.TipoBtec.regular,Ng111Printer.PesoBtec.bold)),
      //Line break for vertical spacing
      new Ng111Printer.Espaciado(1),
      //Bigger test text
      new Ng111Printer.Texto('ESTA ES UNA PRUEBA DE IMPRESIÓN', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.mediana2, Ng111Printer.AlineacionBtec.centro, Ng111Printer.TipoBtec.regular,Ng111Printer.PesoBtec.bold, Ng111Printer.DesbordamientoBtec.palabras)),
      new Ng111Printer.Espaciado(1),
      //Centered texts
      new Ng111Printer.Texto('VERSIÓN: ' + this.versionPlugin, new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.centro, Ng111Printer.TipoBtec.regular,Ng111Printer.PesoBtec.regular)),
      new Ng111Printer.Texto('PUERTO CONEXIÓN: 12000', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.centro, Ng111Printer.TipoBtec.regular,Ng111Printer.PesoBtec.regular)),
      new Ng111Printer.Texto('IMPRESORA SELECCIONADA: '+ configuracionImpresora.nombre, new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.centro, Ng111Printer.TipoBtec.regular,Ng111Printer.PesoBtec.regular)),
      //Aligned left text in bold
      new Ng111Printer.Texto('TEXTOS', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.mediana2, Ng111Printer.AlineacionBtec.izq, Ng111Printer.TipoBtec.regular, Ng111Printer.PesoBtec.bold)),
      //Separator line
      new Ng111Printer.Separador('_', new Ng111Printer.EstilosSeparador()),
      new Ng111Printer.Espaciado(1),
      //Qr code
      new Ng111Printer.Qr('Cadena para el QR Code prueas', estilosQr),
      new Ng111Printer.Espaciado(1),
      new Ng111Printer.Separador('*', new Ng111Printer.EstilosSeparador()),
      new Ng111Printer.Espaciado(1),
      //Centered text in bold
      new Ng111Printer.Texto('ESTILOS', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.mediana1, Ng111Printer.AlineacionBtec.centro, Ng111Printer.TipoBtec.regular, Ng111Printer.PesoBtec.bold)),
      new Ng111Printer.Espaciado(1),
      //Bold text with regular font size
      new Ng111Printer.Texto('BOLD', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.izq, Ng111Printer.TipoBtec.regular, Ng111Printer.PesoBtec.bold)),
      //Regular text with regular font size
      new Ng111Printer.Texto('REGULAR', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.izq, Ng111Printer.TipoBtec.regular, Ng111Printer.PesoBtec.regular)),
      //Italic text with regular font size
      new Ng111Printer.Texto('ITALICA', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.izq, Ng111Printer.TipoBtec.italic, Ng111Printer.PesoBtec.regular)),
      //Italic and bold text with regular font size
      new Ng111Printer.Texto('ITALICA BOLD', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.izq, Ng111Printer.TipoBtec.italic, Ng111Printer.PesoBtec.bold)),
      new Ng111Printer.Espaciado(1),
      //Centered regular text
      new Ng111Printer.Texto('ALINEACIÓN CENTRO', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.centro, Ng111Printer.TipoBtec.regular, Ng111Printer.PesoBtec.regular)),
      new Ng111Printer.Espaciado(1),
      //Regular text aligned to left
      new Ng111Printer.Texto('ALINEACIÓN IZQUIERDA', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.izq, Ng111Printer.TipoBtec.regular, Ng111Printer.PesoBtec.regular)),
      new Ng111Printer.Espaciado(1),
      //Regular text aligned to right
      new Ng111Printer.Texto('ALINEACIÓN DERECHA', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.der, Ng111Printer.TipoBtec.regular, Ng111Printer.PesoBtec.regular)),
      new Ng111Printer.Espaciado(1),
      //Text line with content to the edges
      new Ng111Printer.TextoExtremos('TEXTO IZQ', 'TEXTO DER', 49, 50, estilosIzqLO1, estilosDerLO1),
      new Ng111Printer.Espaciado(2),
      //Bar code
      new Ng111Printer.CodigoBarras('4857002503694', new Ng111Printer.EstilosCodigo()),
      //Text below bar code
      new Ng111Printer.Texto('4857002503694', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.chica, Ng111Printer.AlineacionBtec.centro, Ng111Printer.TipoBtec.regular, Ng111Printer.PesoBtec.regular, Ng111Printer.DesbordamientoBtec.palabras)),
      new Ng111Printer.Espaciado(2),
      //Simple text
      new Ng111Printer.Texto('PLUGIN desarrollado por el equipo de 111btec, esta prohibida la venta o distribución sin autorización, todos los derechos reservados', new Ng111Printer.EstilosTexto(Ng111Printer.TipografiaBtec.lucidaConsole, Ng111Printer.TamanioBtec.regular, Ng111Printer.AlineacionBtec.centro, Ng111Printer.TipoBtec.italic, Ng111Printer.PesoBtec.bold, Ng111Printer.DesbordamientoBtec.palabras)),
    ];

    //Create object to print
    let impresion: Ng111Printer.ImpresionBtec = {
      //Action that is realized in the WIN_PRINTER_CONECTOR plugin
      accion: Ng111Printer.AccionImpresion.imprimir,
      //Configuration object for printer
      confImpresora: configuracionImpresora,
      //Template of what is going to print
      plantillas: plantillaTicket,
      //Copies number of template
      copias: 1
    }

    //Call to the imprimir() function that receives our print object
    this.conectorPrinterService.imprimir(impresion).then((respuesta) => {
      console.log("Impresion terminada", respuesta);
    }).catch((error) => {
      console.log("Error al imprimir.", error)
    })

  }

Versions that are compatible with each others.

ng111printer versions	WIN_PRINTER_CONECTOR versions
1.0.7	1.0.2
1.0.6	1.0.2
1.0.5	1.0.1
1.0.1	1.0.1
0.0.4	1.0.0
0.0.3	1.0.0
0.0.2	1.0.0
0.0.1	1.0.0