https://github.com/bebo925/ng-thermal-print

Angular module for connecting and printing to thermal printers.
https://github.com/bebo925/ng-thermal-print

angular thermal-printer

Last synced: about 1 year ago
JSON representation

Angular module for connecting and printing to thermal printers.

• Host: GitHub
• URL: https://github.com/bebo925/ng-thermal-print
• Owner: bebo925
• License: mit
• Created: 2019-04-19T20:32:35.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-01-04T00:14:06.000Z (over 2 years ago)
• Last Synced: 2025-04-20T17:40:55.629Z (about 1 year ago)
• Topics: angular, thermal-printer
• Language: TypeScript
• Homepage:
• Size: 2.28 MB
• Stars: 44
• Watchers: 7
• Forks: 44
• Open Issues: 65
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          

# Angular Thermal Printer Library

A library for connecting Angular apps with thermal printers.

## Drivers

1. WEBUSB API (No drivers needed. Only works with Chrome and Opera with USB connection)

2. WebPRNT (http)

## Print Language Drivers

1. ESC/POS

2. StarPRNT

3. Star WebPRNT

## Installation

Install library

`npm install ng-thermal-print`

NOTE: if when compiling project you get an error like this:

`ERROR in node_modules/ng-thermal-print/lib/drivers/UsbDriver.d.ts:16:30 - error TS2304: Cannot find name 'USBDevice'. requestUsb(): Observable;`

then add reference to w3c-web-usb by installing it with command: `npm install @types/w3c-web-usb --only=dev`

Import into your application

    import { BrowserModule } from '@angular/platform-browser';

    import { NgModule } from '@angular/core';

    import { ThermalPrintModule } from 'ng-thermal-print'; //add this line

    import { AppComponent } from './app.component';

    @NgModule({

       declarations: [

            AppComponent

        ],

        imports: [

            BrowserModule,

            ThermalPrintModule //add this line

        ],

        providers: [],

        bootstrap: [AppComponent]

    })

    export class AppModule { }

## Example Usage

app.component.ts

    import { PrintService, UsbDriver, WebPrintDriver } from 'ng-thermal-print';

    import { Component } from '@angular/core';

    import { PrintDriver } from 'ng-thermal-print/lib/drivers/PrintDriver';

    @Component({

        selector: 'app-root',

        templateUrl: './app.component.html',

        styleUrls: ['./app.component.css']

    })

    export class AppComponent {

        status: boolean = false;

        usbPrintDriver: UsbDriver;

        webPrintDriver: WebPrintDriver;

        ip: string = '';

        constructor(private printService: PrintService) {

            this.usbPrintDriver = new UsbDriver();

            this.printService.isConnected.subscribe(result => {

                this.status = result;

                if (result) {

                    console.log('Connected to printer!!!');

                } else {

                console.log('Not connected to printer.');

                }

            });

        }

        requestUsb() {

            this.usbPrintDriver.requestUsb().subscribe(result => {

                this.printService.setDriver(this.usbPrintDriver, 'ESC/POS');

            });

        }

        connectToWebPrint() {

            this.webPrintDriver = new WebPrintDriver(this.ip);

            this.printService.setDriver(this.webPrintDriver, 'WebPRNT');

        }

        print(driver: PrintDriver) {

            this.printService.init()

                .setBold(true)

                .writeLine('Hello World!')

                .setBold(false)

                .feed(4)

                .cut('full')

                .flush();

        }

    }

app.component.html

    Status: {{status}}

    


        

        Connect to WebPRNT

    


    


        Connect to USB

    


    


         Print!