Mencetak struk belanja menggunakan printer thermal biasanya mengharuskan kita memasang driver desktop native atau aplikasi pembantu khusus seperti QZ Tray atau print server lokal. Namun, teknologi web modern sekarang memungkinkan komunikasi langsung dari browser ke perangkat keras tanpa software perantara apa pun.

WebUSB vs Web Serial untuk Printer Thermal

Terdapat dua opsi API utama di browser untuk berkomunikasi dengan printer thermal:

WebUSB : Menyediakan akses tingkat rendah ke perangkat USB. Direkomendasikan untuk printer thermal USB standar yang terhubung langsung menggunakan kabel data USB. API ini lebih aman dan standar untuk perangkat POS (Point of Sale) modern.
Web Serial : Menyediakan akses ke serial port komunikasi. Sangat berguna jika Anda menggunakan printer thermal model lama yang memakai interface serial/RS-232, atau jika Anda menghubungkannya melalui modul adapter Bluetooth/Serial ke mikrokontroler.

Secara umum, WebUSB lebih sering digunakan karena mayoritas printer thermal modern saat ini menggunakan konektor USB.

Bagaimana WebUSB Berinteraksi dengan Perangkat Keras?

WebUSB bekerja dengan mengirimkan transfer data USB langsung ke endpoint interface perangkat. Protokol ini membutuhkan beberapa tahapan:

Request Device : Meminta izin user melalui dialog sistem browser untuk memilih perangkat USB yang terdeteksi.
Open Session : Membuka koneksi ke perangkat.
Select Configuration : Memilih konfigurasi aktif perangkat USB (biasanya indeks `1`).
Claim Interface : Meminta kendali eksklusif atas interface printer (biasanya indeks `0`).
Transfer Out : Mengirim byte data ke endpoint keluar (USB bulk transfer out).

Memahami Perintah ESC/POS

Printer thermal tidak menerima teks biasa atau HTML. Printer ini berkomunikasi menggunakan command set **ESC/POS** (Escape/Point of Sale) yang dikembangkan oleh Epson. Untuk mencetak struk, kita harus merancang struk menggunakan kode perintah biner tertentu lalu mengirimkannya.

Contoh perintah dasar ESC/POS:

Inisialisasi Printer : `ESC @` (Hex `1B 40`) - Digunakan untuk mereset buffer dan seting printer ke mode awal.
Perataan Teks (Alignment) : `ESC a n` (Hex `1B 61 n`) - Di mana `n` bernilai `0` untuk rata kiri, `1` tengah, dan `2` rata kanan.
Cetak & Ganti Baris : `LF` (Hex `0A`) - Menginstrukan printer untuk mencetak baris teks saat ini dan memajukan kertas satu baris.
Potong Kertas (Cut) : `GS V m n` (Hex `1D 56 m n`) - Menginstruksikan printer yang mendukung auto-cutter untuk memotong kertas.

Menyusun byte biner ini satu per satu secara manual sangat melelahkan dan rawan bug.

Solusi Praktis: Library `web-thermal-printer`

Untuk mempermudah pembuatan format struk belanja tanpa harus pusing memikirkan konversi byte biner ESC/POS secara manual, kita dapat menggunakan library open-source [`web-thermal-printer`]. Library ini menyediakan API chainable yang intuitif untuk menghasilkan bytecode ESC/POS yang siap dikirim langsung ke printer.

Cara Instalasi

Cukup jalankan perintah berikut di proyek React atau project JavaScript Anda:

```bash

npm install web-thermal-printer

Contoh Penerapan Lengkap di React

Berikut adalah contoh implementasi lengkap pembuatan struk belanja dan proses pengiriman datanya langsung ke printer menggunakan React:

import { ThermalPrinterSDK, PrintPayload } from 'web-thermal-printer';

// 1. Instantiate SDK
const printer = new ThermalPrinterSDK();

async function printReceipt() {
  // 2. Initialize WASM engine (Zero-config embedded WASM)
  await printer.init();

  // 3. Connect via Web USB (Requires user gesture/button click in browser)
  await printer.connectUSB(1);

  // 4. Send Print Payload
  const payload: PrintPayload = {
    type: 'text',
    text: `TOKO UTAMA JAYA
Jl. Mawar No. 88, Jakarta
--------------------------------
No Nota : TRX-2026-001
Kasir   : Budi
--------------------------------
Kopi Latte      2x @20.000 = 40.000
Roti Toast      1x @15.000 = 15.000
--------------------------------
Total                      = 55.000
================================
Terima Kasih atas Kunjungan Anda!`,
    align: 'center',
    bold: true,
    cut: true,
    feed: 3,
  };

  const bytesSent = await printer.print(payload);
  console.log(`Print successful! Sent ${bytesSent} bytes.`);
}

Tips Tambahan saat Menggunakan WebUSB

Keamanan (HTTPS): WebUSB API hanya aktif pada environment secure context (HTTPS) atau `localhost` selama proses development.
Karakter Non-ASCII: Pastikan encoding printer sesuai sebelum mengirim karakter khusus atau simbol mata uang non-standar.

Cara Cetak Struk ESC/POS Langsung dari Browser Tanpa Aplikasi Desktop