Following is the Angular code of app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
private usbDevice: any;
private textToProint: any[] = [
'SIZE 48 mm,25 mm',
'CLS',
'TEXT 30,10,"4",0,1,1,"HackerNoon"',
'TEXT 30,50,"2",0,1,1,"WebUSB API"',
'PRINT 1',
'END',
];
async connect() {
try {
this.usbDevice = await (navigator as any).usb.requestDevice({ filters: [{ VendorID: 0x0B1B, ProductID: 0x0003 }] });
console.log('Connected to USB device:', this.usbDevice);
} catch (error) {
console.error('Error connecting to USB device:', error);
}
}
async disconnect() {
try {
if (this.usbDevice) {
await this.usbDevice.close();
console.log('Disconnected from USB device.');
}
} catch (error) {
console.error('Error disconnecting from USB device:', error);
}
}
async send() {
console.log(this.usbDevice, 'Sending');
try {
if (this.usbDevice) {
console.log("USB device opened:", this.usbDevice.configuration.interfaces[1]);
await this.usbDevice.open()
.then(() => this.usbDevice.selectConfiguration(1))
.then(() => this.usbDevice.claimInterface(this.usbDevice.configuration.interfaces[1]?.interfaceNumber))
await this.usbDevice.transferOut(
this.usbDevice.configuration.interfaces[1]?.alternate.endpoints.find((obj: any) => obj.direction === 'out').endpointNumber,
new Uint8Array(
new TextEncoder().encode(this.textToProint.join('\r\n'))
)
);
await this.usbDevice.releaseInterface(0);
await this.usbDevice.close();
console.log("Data sent to printer:");
}
} catch (error) {
console.error("Error connecting to printer:", error);
}
}
}
And I have app.component.html
<div>
<body>
<button style="background-color: blue; cursor: pointer; color: aliceblue; border-radius: 12px; margin: 2px; padding: 4px; align-items: center;" (click)="connect()">Connect to USB Device</button>
<button style="padding: 4px; margin: 4px; cursor: pointer; border-radius: 12px; background-color: blueviolet; color: white;" (click)="send()">Send Data</button>
<button style="padding: 4px; margin: 4px; cursor: pointer; border-radius: 12px; background-color: darkred; color: white;" (click)="disconnect()">Disconnect</button>
</body>
</div>
I need to print a ticket in thermal printer (MP-4200 TH). I installed the driver and I can able to print the plain text via printer by above code. But I need to supply the ESC/POS command in to printer from angular typescript vis webUSB API . All I want to print and cut the ticket by printer itself.(Do we acheive this using web USB ? ). NOTE: I referred this link -> https://hackernoon.com/exploring-the-webusb-api-connecting-to-usb-devices-and-printing-with-tspltspl2
So the question became : Can we pass the ESC/POS command from angular application via WebUSB API to print the ticket and cut a ticket by itslef ?