On button click print on Thermal Printer using JavaScript, angular or Node JS

Question

I have created on NodeJS API, which I call on click of a button in angular application.

Want to print receipts of purchase on click of button, via thermal printer . Without any PDF save or print dialog popup, directly it should print.

I tried this nodeJS code but looks like it works for desktop application and not for web. I have UI and BE code in different codebase repo.

I tries this code:

'use strict';
const { PosPrinter } = require("electron-pos-printer");
class SeriesPrinter {
  constructor() { }
  printSr() {
    console.log("Inside print function");
    const print_data = [
      { type: 'text', value: 'Sample text', style: 'text-align:center;font-weight: bold' },
      { type: 'text', value: 'Another text', style: 'color: #fff' },
    ];

// returns promise<any>
PosPrinter.print(print_data, {
  printerName: 'POS-80C',
  preview: false,
  width: '170px',               //  width of content body
  margin: '0 0 0 0',            // margin of content body
  copies: 1,                   // The number of copies to print
})
  .then(() => {
    // some code ...
  })
  .catch((error) => {
    console.error(error);
  });
  }
}
module.exports = SeriesPrinter;

its throwing an error:

Inside print function
TypeError: BrowserWindow is not a constructor
    \node_modules\electron-pos-printer\dist\post-printer.js:87:30
    at new Promise (<anonymous>)
    \node_modules\electron-pos-p

Any ideas to fix this or any other solution(UI side or at nodeJS side any will work, it should print silently)

Answer 1

You're getting TypeError: BrowserWindow is not a constructor because you're using it in a non-electron environment(browser).

What I would do since you mentioned Angular:

I would have a service that sends the data I want to print to a component that renders the data(actually make the visual document with the data from the server) and then window.print().

The service would look like this:

export class PrintService {
      isPrinting = false;
    
      constructor(private router: Router) { }
    
      printDocument(documentName: string, documentData: string[]) {
        this.isPrinting = true;
        this.router.navigate(['/',
          { outlets: {
            'print': ['print', documentName, documentData.join()]
          }}]);
      }
    
      onDataReady() {
        setTimeout(() => {
          window.print();
          this.isPrinting = false;
          this.router.navigate([{ outlets: { print: null }}]);
        });
      }
    }

and you would use it into a component like InvoiceComponent:

ngOnInit() {
  this.invoiceDetails = this.invoiceIds
    .map(id => this.getInvoiceDetails(id));
  Promise.all(this.invoiceDetails)
    .then(() => this.printService.onDataReady());
}

If you don't want to do the fancy stuff, you can just keep it simple and lay out what you want to print and just call window.print() from the component:

In HTML

<button (click)="onPrint()">Print</button>

In TS

onPrint(){
    window.print();
}

You can also use the open/write/close popup method:

ou can also use the open/write/close popup method:

HTML ....... <button (click)="printToCart('printSectionId')" class="button">Print ...

TS

export class Component{          
constructor(){}
       printToCart(printSectionId: string){
        let popupWinindow
        let innerContents = document.getElementById(printSectionId).innerHTML;
        popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWinindow.document.open();
        popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>');
        popupWinindow.document.close();
  }

 }

On button click print on Thermal Printer using JavaScript, angular or Node JS

Question

1 answers

solution1
0 2021-11-07 09:16:36

On button click print on Thermal Printer using JavaScript, angular or Node JS

Question

1 answers

solution1 0 2021-11-07 09:16:36

solution1
0 2021-11-07 09:16:36