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)
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:
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());
}
In HTML
<button (click)="onPrint()">Print</button>
In TS
onPrint(){
window.print();
}
HTML
<div id="printSectionId" >
.......
<button (click)="printToCart('printSectionId')" class="button">Print</button>
...
</div>
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();
}
}