Recta Host, Direct Printing Thermal From Browser

Urusan print meng-print memang sebenarnya lebih ke urusan aplikasi desktop, nah terus bagaimana programmer web based seperti saya ? beberapa project saya kebetulan mengharuskan saya untuk bisa melakukan printing. Sebenarnya ini tidak terlalu sulit, menggunakan fungsi JS window.print() sudah bisa, namun fungsi window.print() tidak begitu memberikan hasil yang baik terutama jika menggunakan printer jenis pos / thermal.

Cara kedua saya coba adalah mengkonvert dulu ke pdf, baru dari pdf di print. Hasilnya lebih baik namun merepotkan dari sisi end user dan untuk transaksi yang banyak seperti Kasir, cara ini tidak bisa diandalkan.

Cara ketiga menggunakan library escpos-php milik mike42. Cara ini cukup menarik menurut saya. namun kekurangannya printer harus satu jaringan dengan Server. Server Cloud berkendala disini.

Cara keempat adalah yang terpikir dari saya adalah menggunakan bantuan aplikasi dekstop untuk menghandle urusan printer. Salah satu aplikasinya namanya adalah Recta.

Nah berikut ini saya akan memberikan tutorial bagaimana print langsung lewat browse menggunakan Recta:

Persiapan

Ada beberapa file yang harus kita siapkan / kita download:

• Recta-Host, ini adalah aplikasi yang nantinya akan menghandle dari perintah print dari Browser ke Device Printer, Anda bisa download langsung di repositori disini
• Zadig, ini khusus untuk pengguna Windows. Zadig digunakan untuk menginstall Driver WinUSB yang nanti dibutuhkan jika kita akan menggunakan printer dengan adapter USB, Anda bisa download langsung lewat website Zadig disini 

Installasi

Install / Replace Driver Printer menggunakan Zadig

Berikut ini step-step installasi driver printer usb dengan Zadig:

• Buka Zadig yang telah kita download tadi.
• Klik Options > List All Devices

•  Pilih device printer Anda, kebetulan punya saya namanya “Generic Bulk Device”, anda bisa lepas dan colok lagi usb printer anda jika ragu.

• Lalu klik Install Driver / Replace Drive.

Install Recta-Host

Untuk installasi Recta-Host cukup mudah:

• Buka Recta-Setup.exe yang sudah kita download tadi
• Jika muncul peringatan Windows protected your PC. jangan khawatir, cukup klik More info > Run Anyway

• Tunggu loading selesai
• Setelah loading selesai, Recta-Host akan terbuka otomatis, sampai disini installasi Recta-Host sudah berhasil

• Lalu kita set Printer Adapter, karena kita menggunakan Printer USB, maka kita set ke USB. untuk VID & PID, kita kosongi saja
• Selanjutnya jangan lupa kita Save

• Klik Start untuk mengaktifkan service Printernya,
  kalau tidak ada masalah akan akan muncul Service Started ! di Log.
  Klik Test-Print untuk memastikan Printer berjalan normal

 

Persiapan Code / Server

Setelah sisi client / host, sekarang kita masuk ke sisi server / code kita.

• Include library Recta ke halaman web kita.  

• <script src="https://cdn.jsdelivr.net/npm/recta/dist/recta.js"></script>

  Lalu tambahan script untuk melakukan print, contoh sebagai berikut:
  ganti APPKEY dengan App Key yang ada diconfigurasi Recta-Host. 

   

• <button onclick="onClick">Print</button>

  <script src="https://cdn.jsdelivr.net/npm/recta/dist/recta.js"></script>
  <script type="text/javascript">
    var printer = new Recta('APPKEY', '1811')
  
    function onClick () {
      printer.open().then(function () {
        printer.align('center')
          .text('Hello World !!')
          .bold(true)
          .text('This is bold text')
          .bold(false)
          .underline(true)
          .text('This is underline text')
          .underline(false)
          .barcode('UPC-A', '123456789012')
          .cut()
          .print()
      })
    }
  </script>

  Note

• untuk APPKEY, bisa diset 1 KEY untuk semua installasi Recta-Host, sehingga anda tidak perlu merubah KEY disisi code.
• APPKEY disarankan menggunakan 10 karakter / lebih dan JANGAN mengunakan kata yang mudah ditebak seperti 1234567890, ABCDEFGHIJ, dan sejenisnya demi menghindari hal yang tidak dikehendaki.
• untuk sementara Recta baru support untuk printer dengan command set ESCPOS (printer POS, baik thermal / dot matrix), untuk Ink Jet & Laset jet masih belum bisa.