Sobatcoding.com - Tutorial Cetak Nota Langsung Menggunakan HTML dan Javascript dengan Thermal Printer Show Pada artikel sebelumnya kita telah membahas bagaimana cara direct print ke printer ESC/POS menggunakan php. Kali ini kita akan mencoba fitur direct print atau cetak langsung nota ke printer ESC/POS atau printer thermal via browser menggunakan html, css dan javascript. Kali ini kita menggunakan framework CodeIgniter sebagai contoh. Bagaimana caranya? kita langsung ke step-stepnya. Perhatikan langkah-langkah berikut: Persiapan DatabaseSebagai contoh kita siapkan dulu table seperti berikut atau kalian bisa memakai data dari table kalian sendiri.
Buat Controller dan RouteKita buat sebuah controller, sebagai contoh PrintController dan buat kode seperti berikut.
Tambahkan route baru contoh sebagai berikut.
Buat Halaman ViewBuatlah sebuah view bernama nota-generic.php dan masukkan kode berikut.
Update CSS dan JavascriptBuat sebuah css bernama print.css dan masukkan kode berikut.
Kita tambah script javascript di dalam halaman view yang berfungsi agar halaman auto print saat dimuat.
Setting Printer dan Kertas (Paper Size)Printer kita buat default mengarah ke Printer Generic/Text Only. Untuk ukuran kertas nota kita bisa buat form baru dengan cara berikut.
Jangan lupa set kertas print ke form paper yang telah kita buat sebelumnya. Setting Browser Remove Dialog Print (Silent Print)Selanjutnya kita setting browser agar dialog print tidak muncul dan bisa langsung auto direct print. Browser Chrome Untuk chrome kita bisa tambahkan --kiosk-printing --kiosk. Untuk lebih detail kalian bisa baca di artikel berikut https://www.shoptill-e.com/support/48. Browser Firefox Untuk firefox kalian bisa setting dengan cara masuk about:config, klik kanan Pilih New > Boolean. Set value menjadi true. Untuk lebih detail kalian bisa baca di artikel berikut https://www.shoptill-e.com/support/44 Silahkan kalian jalankan server XAMPP atau Laragon dan akses URL print yang telah kalian buat. Hasil dari output di atas kurang lebih seperti berikut. Gambar Capture Hasil Print Sekian tutorial kali ini. Semoga bermanfaat. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini. |