12 Mar 2022 09:25
Dipost oleh Admin
12.183
0
Sobatcoding.com - Tutorial Cetak Nota Langsung Menggunakan HTML dan Javascript dengan Thermal Printer
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 Database
Sebagai contoh kita siapkan dulu table seperti berikut atau kalian bisa memakai data dari table kalian sendiri.
-- --------------------------------------------------------
-- Host: 127.0.0.1
-- Server version: 5.7.24 - MySQL Community Server (GPL)
-- Server OS: Win32
-- HeidiSQL Version: 11.3.0.6295
-- --------------------------------------------------------
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!50503 SET NAMES utf8mb4 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
-- Dumping structure for table db_koperasi.m_profile
DROP TABLE IF EXISTS `m_profile`;
CREATE TABLE IF NOT EXISTS `m_profile` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`license` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'Nama Laundry',
`owner` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'Pemilik Laundry',
`address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`phone` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`whatsapp` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`nota_name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`nota_address` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`nota_phone` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`nota_printer` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `license` (`license`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- Dumping data for table db_koperasi.m_profile: ~0 rows (approximately)
DELETE FROM `m_profile`;
/*!40000 ALTER TABLE `m_profile` DISABLE KEYS */;
INSERT INTO `m_profile` (`id`, `license`, `name`, `owner`, `address`, `phone`, `whatsapp`, `nota_name`, `nota_address`, `nota_phone`, `nota_printer`, `created_at`, `updated_at`) VALUES
(1, 'axc', 'KPRI - USAHA GOTONG ROYONG', 'Koperasi Unit Malang', 'Komplek RSJ Dr. Radjiman Wediodiningrat Lawang', '(0341) 427457', '', 'KPRI - USAHA GOTONG ROYONG BANGUN', 'Komplek RSJ Dr. Radjiman Wediodiningrat Lawang', '(0341) 427457', 'c:\\laragon\\', '2020-11-16 10:34:57', '2021-12-30 15:43:09');
/*!40000 ALTER TABLE `m_profile` ENABLE KEYS */;
-- Dumping structure for table db_koperasi.t_customers
DROP TABLE IF EXISTS `t_customers`;
CREATE TABLE IF NOT EXISTS `t_customers` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`code` varchar(10) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`code_old` varchar(25) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`nia` varchar(10) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'Nomor Induk Anggota',
`name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`nik` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`place_birth` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`date_birth` date DEFAULT NULL,
`unit` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`phone` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`pns` tinyint(1) DEFAULT '1',
`recom_name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`recom_nik` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`recom_place_birth` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`recom_date_birth` date DEFAULT NULL,
`recom_unit` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`recom_address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`recom_phone` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`register_at` date DEFAULT NULL,
`limit` double DEFAULT '0' COMMENT 'Limit Piutang',
`limit_remaining` double DEFAULT '0' COMMENT 'Sisa Limit',
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
`deleted_at` timestamp NULL DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `deleted_at` (`deleted_at`),
KEY `code` (`code`),
KEY `nia` (`nia`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- Dumping data for table db_koperasi.t_customers: ~7 rows (approximately)
DELETE FROM `t_customers`;
/*!40000 ALTER TABLE `t_customers` DISABLE KEYS */;
INSERT INTO `t_customers` (`id`, `code`, `code_old`, `nia`, `name`, `nik`, `place_birth`, `date_birth`, `unit`, `address`, `phone`, `pns`, `recom_name`, `recom_nik`, `recom_place_birth`, `recom_date_birth`, `recom_unit`, `recom_address`, `recom_phone`, `register_at`, `limit`, `limit_remaining`, `created_at`, `updated_at`, `deleted_at`) VALUES
(1, 'C001', NULL, 'P-00001', 'Umum', NULL, NULL, NULL, NULL, NULL, NULL, NULL, '', '', '', NULL, '', '', '', '2021-10-07', 0, -500008, '2020-11-17 08:54:26', '2021-10-07 02:13:29', NULL),
(2, 'C002', NULL, 'P-00002', 'Wahyu Indra', '645645645646', '-', '1982-10-05', 'SIMRS', 'Mlg', '0812164', 1, '', '', '', NULL, '', '', '', '2021-10-07', 500000, 391600, '2020-11-19 14:21:53', '2021-12-31 09:41:39', NULL),
(3, 'C003', NULL, 'P-00003', 'Yuli Indah', '4245646456', '-', '2021-10-07', 'RM', 'Malang', '13161561', 1, '', '', '', NULL, '', '', '', '2021-10-07', 500000, 483200, '2020-11-19 14:22:05', '2021-12-31 09:41:32', NULL),
(4, 'C004', NULL, 'P-00004', 'Yuli Agustin', '12345345', 'Malang', '2021-10-06', 'Rekam Medis', 'Malang, Polehan', '018446464654', 1, '', '', '', NULL, '', '', '', '2021-10-06', 500000, 337600, '2020-11-19 07:32:01', '2021-12-31 09:41:25', NULL),
(5, 'C005', NULL, 'K-00001', 'Arie', '12123456', 'Bjn', '2001-01-01', 'SIRS', 'MLG', '01424878', 0, '', '', '', NULL, '', '', '', '2021-10-07', 5000000, 4878560, '2021-10-05 07:04:09', '2021-12-30 11:26:58', NULL),
(6, 'C006', NULL, 'P-00005', 'Indah Ardiyanti', '56456546', '-', '1985-10-05', 'RM', '-', '-', 0, '-', '-', '-', NULL, '-', '-', '-', '2021-10-07', 1000000, 1000000, '2021-10-07 02:08:31', '2021-11-23 14:24:10', '2021-12-06 11:40:15'),
(7, 'C007', 'M001', NULL, 'Mr. Anonim', NULL, NULL, NULL, NULL, '', '', 1, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, 0, -104500, '2021-12-31 09:11:45', NULL, NULL);
/*!40000 ALTER TABLE `t_customers` ENABLE KEYS */;
-- Dumping structure for table db_koperasi.t_trans
DROP TABLE IF EXISTS `t_trans`;
CREATE TABLE IF NOT EXISTS `t_trans` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`t_date` date DEFAULT NULL,
`t_datetime` timestamp NULL DEFAULT NULL,
`invoice` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`customer_id` varchar(15) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`customer` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`disc` double DEFAULT '0' COMMENT '%',
`total_disc` double DEFAULT '0',
`sub_total` double DEFAULT '0',
`ppn` double DEFAULT '0',
`grand_total` double DEFAULT '0',
`pay` double DEFAULT '0' COMMENT 'Jumlah bayar',
`remaining_payment` double DEFAULT '0' COMMENT 'Sisa Bayar',
`credit` double DEFAULT '0' COMMENT 'Jumlah yang digunakan untuk jurnal transaksi',
`total_retur` double DEFAULT '0',
`payment_date` timestamp NULL DEFAULT NULL,
`payment_type` enum('Tunai','Angsuran') COLLATE utf8mb4_unicode_ci DEFAULT 'Tunai',
`payment_status` enum('BELUM BAYAR','LUNAS','BELUM LUNAS') COLLATE utf8mb4_unicode_ci DEFAULT 'BELUM BAYAR',
`angsuran` tinyint(2) DEFAULT NULL COMMENT '(x) angsuran',
`bunga` double DEFAULT '0' COMMENT 'Bunga %',
`bunga_angsuran` double DEFAULT '0',
`total_angsuran` double DEFAULT '0' COMMENT 'Biaya angsuran perbulan',
`created_by` int(11) DEFAULT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
`deleted_at` timestamp NULL DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `invoice` (`invoice`),
KEY `customer_id` (`customer_id`),
KEY `status_payment` (`payment_status`),
KEY `deleted_at` (`deleted_at`),
KEY `t_date` (`t_date`),
KEY `created_by` (`created_by`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- Dumping data for table db_koperasi.t_trans: ~3 rows (approximately)
DELETE FROM `t_trans`;
/*!40000 ALTER TABLE `t_trans` DISABLE KEYS */;
INSERT INTO `t_trans` (`id`, `t_date`, `t_datetime`, `invoice`, `customer_id`, `customer`, `disc`, `total_disc`, `sub_total`, `ppn`, `grand_total`, `pay`, `remaining_payment`, `credit`, `total_retur`, `payment_date`, `payment_type`, `payment_status`, `angsuran`, `bunga`, `bunga_angsuran`, `total_angsuran`, `created_by`, `created_at`, `updated_at`, `deleted_at`) VALUES
(1, '2022-01-14', '2022-01-14 08:02:00', 'J202201000001', 'C004', 'Yuli Agustin', 0, 0, 35000, 0, 37000, 0, 7400, 7400, 0, NULL, 'Angsuran', 'BELUM BAYAR', 5, 1.1, 2000, 7400, 1, '2022-01-14 08:02:00', NULL, NULL),
(2, '2022-01-14', '2022-01-14 08:04:27', 'J202201000002', 'C002', 'Wahyu Indra', 0, 0, 0, 0, 0, 0, 0, 0, 0, NULL, 'Tunai', 'LUNAS', NULL, 0, 0, 0, 1, '2022-01-14 08:04:27', NULL, NULL),
(3, '2022-01-14', '2022-01-14 08:04:41', 'J202201000003', 'C004', 'Yuli Agustin', 0, 0, 3200, 0, 3200, 5000, 0, 0, 0, '2022-01-14 08:04:41', 'Tunai', 'LUNAS', NULL, 0, 0, 0, 1, '2022-01-14 08:04:41', NULL, NULL);
/*!40000 ALTER TABLE `t_trans` ENABLE KEYS */;
-- Dumping structure for table db_koperasi.t_trans_detail
DROP TABLE IF EXISTS `t_trans_detail`;
CREATE TABLE IF NOT EXISTS `t_trans_detail` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`invoice` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`code` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`name` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`item` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`price` double DEFAULT NULL,
`disc` double DEFAULT NULL,
`extra` double DEFAULT NULL,
`tax` double DEFAULT NULL,
`qty` float DEFAULT NULL,
`total` double DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `invoice` (`invoice`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- Dumping data for table db_koperasi.t_trans_detail: ~3 rows (approximately)
DELETE FROM `t_trans_detail`;
/*!40000 ALTER TABLE `t_trans_detail` DISABLE KEYS */;
INSERT INTO `t_trans_detail` (`id`, `invoice`, `code`, `name`, `item`, `price`, `disc`, `extra`, `tax`, `qty`, `total`) VALUES
(1, 'J202201000001', '8996001600610', 'Tora Cafe Milky Latte', NULL, 3500, 0, NULL, NULL, 10, 35000),
(2, 'J202201000002', '25234234', 'ewgert', NULL, 0, 0, NULL, NULL, 1, 0),
(3, 'J202201000003', '8996001600269', 'Le Mineral 600ml', NULL, 3200, 0, NULL, NULL, 1, 3200);
/*!40000 ALTER TABLE `t_trans_detail` ENABLE KEYS */;
/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;
/*!40014 SET FOREIGN_KEY_CHECKS=IFNULL(@OLD_FOREIGN_KEY_CHECKS, 1) */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40111 SET SQL_NOTES=IFNULL(@OLD_SQL_NOTES, 1) */;
Buat Controller dan Route
Kita buat sebuah controller, sebagai contoh PrintController dan buat kode seperti berikut.
<?php
class PrintController extends CI_Controller {
public function __construct() {
parent::__construct();
}
public function cetakNota($nota)
{
$d = $this->db->get_where('t_trans', ['invoice' => $nota ])->row();
if( !$d ) die("not found");
$d->detail = $this->db->get_where('t_trans_detail', ['invoice' => $nota ])->result();
$profile = $this->db->select("nota_name, nota_address, nota_phone, nota_printer")->from("m_profile")->get()->row();
$customer = $this->db->select('nia, name')->get_where('t_customers', ['code' => $d->customer_id ])->row();
$this->load->view('nota-generic', ['d' => $d, 'profile' => $profile, 'customer' => $customer]);
}Tambahkan route baru contoh sebagai berikut.
$route['print/nota/([A-Za-z0-9]+)'] = 'printController/cetakNota/$1';
Buat Halaman View
Buatlah sebuah view bernama nota-generic.php dan masukkan kode berikut.
<html>
<head>
<title>Cetak Nota <?= $d->invoice ?></title>
<link rel="stylesheet" href="<?= asset('css/print.css?time='. md5(time())) ?>">
</head>
<body class="struk" onload="printOut()">
<section class="sheet">
<?php
echo '<table cellpadding="0" cellspacing="0">
<tr>
<td>'.$profile->nota_name.'</td>
</tr>
<tr>
<td>'.$profile->nota_address.'</td>
</tr>
<tr>
<td>Telp: '.$profile->nota_phone.'</td>
</tr>
</table>';
echo(str_repeat("=", 40)."<br/>");
$invoice = $d->invoice. str_repeat(" ", (40 - (strlen($d->invoice))));
$kasir = user('name'). str_repeat(" ", (40 - (strlen(user('name')))));
$tgl = date('d-m-Y H:i:s', strtotime($d->created_at)). str_repeat(" ", (40 - (strlen(date('d-m-Y H:i:s', strtotime($d->created_at))))));
$customer = '['. $customer->nia.'] '.$customer->name;
$customer = $customer. str_repeat(" ", (48 - (strlen($customer))));
echo '<table cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td align="left" class="txt-left">Nota </td>
<td align="left" class="txt-left">:</td>
<td align="left" class="txt-left"> '. $invoice. '.</td>
</tr>
<tr>
<td align="left" class="txt-left">Kasir</td>
<td align="left" class="txt-left">:</td>
<td align="left" class="txt-left"> '. $kasir.'</td>
</tr>
<tr>
<td align="left" class="txt-left">Tgl. </td>
<td align="left" class="txt-left">:</td>
<td align="left" class="txt-left"> '. $tgl.'</td>
</tr>
<tr>
<td align="left" colspan="3" class="txt-left">'.$customer.'</td>
</tr>
</table>';
echo '<br/>';
$tItem = 'Item'. str_repeat(" ", (13 - strlen('Item')));
$tQty = 'Qty'. str_repeat(" ", (6 - strlen('Qty')));
$tHarga= str_repeat(" ", (9 - strlen('Harga'))).'Harga';
$tTotal= str_repeat(" ", (10 - strlen('Total'))).'Total';
$caption = $tItem. $tQty. $tHarga. $tTotal;
echo '<table cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td align="left" class="txt-left">'. $caption . '</td>
</tr>
<tr>
<td align="left" class="txt-left">'. str_repeat("=", 38) . '</td>
</tr>';
if(!empty( $d->detail ))
{
foreach($d->detail as $k=>$v)
{
$item = $v->name. str_repeat(" ", (38 - (strlen($v->name))));
echo '<tr>';
echo'<td align="left" class="txt-left">'.$item.'</td>';
echo '</tr>';
echo '<tr>';
$qty = Rupiah($v->qty,0);
$qty = $qty. str_repeat(" ", ( 13 - strlen($qty)) );
$disk = Rupiah($v->disc,2).'%';
$disk = str_repeat(" ", ( 6 - strlen($disk) ) ). $disk;
$price = Rupiah($v->price);
$price = str_repeat(" ", ( 9 - strlen($price)) ). $price;
$total = Rupiah($v->total,2);
$lentotal = strlen($total);
$total = str_repeat(" ", ( 10 - $lentotal) ). $total;
echo'<td class="txt-left" align="left">'.$qty. $disk. $price. $total .'</td>';
echo '</tr>';
}
echo '<tr><td>'. str_repeat('-', 38).'</td></tr>';
//Sub Total
$titleST = 'Sub Total';
$titleST = $titleST. str_repeat(" ", ( 19 - strlen($titleST)) );
$ST = Rupiah($d->sub_total, 2);
$ST = str_repeat(" ", ( 23 - strlen($ST)) ). $ST;
echo '<tr><td>'. $titleST. $ST.'</td></tr>';
//Diskon
$titleDs = 'Diskon';
$titleDs = $titleDs. str_repeat(" ", ( 15 - strlen($titleDs)) );
$Ds = Rupiah($d->disc, 2);
$Ds = str_repeat(" ", ( 23 - strlen($Ds)) ). $Ds;
echo '<tr><td>'. $titleDs. $Ds.'</td></tr>';
//PPN
$titlePPn = 'PPN';
$titlePPn = $titlePPn. str_repeat(" ", ( 15 - strlen($titlePPn)) );
$PPn = Rupiah($d->ppn, 2);
$PPn = str_repeat(" ", ( 23 - strlen($PPn)) ). $PPn;
echo '<tr><td>'. $titlePPn. $PPn.'</td></tr>';
if( $d->payment_type == 'Angsuran' )
{
$tX = 'Angsuran (x)';
$tX = $tX. str_repeat(" ", ( 15 - strlen($tX)) );
$x = $d->angsuran;
$x = str_repeat(" ", ( 23 - strlen($x)) ). $x;
echo '<tr><td>'. $tX. $x.'</td></tr>';
$tAng = 'Besar Angsuran';
$tAng = $tAng. str_repeat(" ", ( 15 - strlen($tAng)) );
$totalAng = Rupiah($d->total_angsuran,2);
$totalAng = str_repeat(" ", ( 23 - strlen($totalAng)) ). $totalAng;
echo '<tr><td>'. $tAng. $totalAng.'</td></tr>';
}
//Grand Total
$titleGT = 'Grand Total';
$titleGT = $titleGT. str_repeat(" ", ( 19 - strlen($titleGT)) );
$GT = Rupiah($d->grand_total, 2);
$GT = str_repeat(" ", ( 23 - strlen($GT)) ). $GT;
echo '<tr><td>'. $titleGT. $GT.'</td></tr>';
//Bayar
$titlePy = 'BAYAR';
$titlePy = $titlePy. str_repeat(" ", ( 15 - strlen($titlePy)) );
$Py = Rupiah($d->pay, 2);
$Py = str_repeat(" ", ( 23 - strlen($Py)) ). $Py;
echo '<tr><td>'. $titlePy. $Py.'</td></tr>';
$kembali= $d->payment_type == 'Angsuran' ? 0 : $d->pay - $d->grand_total;
//Kembali
$titleK = 'KEMBALI';
$titleK = $titleK. str_repeat(" ", ( 15 - strlen($titleK)) );
$Kb = Rupiah(($kembali), 2);
$Kb = str_repeat(" ", ( 23 - strlen($Kb)) ). $Kb;
echo '<tr><td>'. $titleK. $Kb.'</td></tr>';
echo '<tr><td> </td></tr>';
}
echo '</table>';
$footer = 'Terima kasih atas kunjungan anda';
$starSpace = ( 32 - strlen($footer) ) / 2;
$starFooter = str_repeat('*', $starSpace+1);
echo($starFooter. ' '.$footer . ' '. $starFooter."<br/><br/><br/><br/>");
echo '<p> </p>';
?>
</section>
</body>
</html>
Update CSS dan Javascript
Buat sebuah css bernama print.css dan masukkan kode berikut.
@page { margin: 0 }
body { margin: 0; font-size:10px;font-family: monospace;}
td { font-size:10px; }
.sheet {
margin: 0;
overflow: hidden;
position: relative;
box-sizing: border-box;
page-break-after: always;
}
/** Paper sizes **/
body.struk .sheet { width: 58mm; }
body.struk .sheet { padding: 2mm; }
.txt-left { text-align: left;}
.txt-center { text-align: center;}
.txt-right { text-align: right;}
/** For screen preview **/
@media screen {
body { background: #e0e0e0;font-family: monospace; }
.sheet {
background: white;
box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
margin: 5mm;
}
}
/** Fix for Chrome issue #273306 **/
@media print {
body { font-family: monospace; }
body.struk { width: 58mm; text-align: left;}
body.struk .sheet { padding: 2mm; }
.txt-left { text-align: left;}
.txt-center { text-align: center;}
.txt-right { text-align: right;}
}
Kita tambah script javascript di dalam halaman view yang berfungsi agar halaman auto print saat dimuat.
<script>
var lama = 1000;
t = null;
function printOut(){
window.print();
t = setTimeout("self.close()",lama);
}
</script>
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.
- Masuk ke menu Control Panel\Hardware and Sound\Devices and Printers
- Klik menu Print server properties
- Klik create a new form, masukkan nama kertas yang akan kita buat.
Untuk Width kita set 5,8 cm sedangkan Height kita set 10 cm. - Klik OK
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.
CodeIgniter (22)
Komentar 0