I'm facing a problem with my BIXOLON printer where I'm trying to print a receipt using JavaScript, but the printing page size is too large.
Inner HTML:
<div id="divToPrint" class="invoice p-3 mb-3" style="max-height:100%">
<div class="row">
<div class="col-12">
<h4 style="text-align:center">
<img src="<?php echo base_url()?>assets/dist/img/AdminLTELogo.png" class="img-responsive" style="max-width:100px;margin:0 auto;display:block">
<br>
</h4>
</div>
</div>
<div class="row invoice-info">
<div class="col-sm-4 invoice-col">
</div>
<div class="col-sm-4 invoice-col">
</div>
<div class="col-sm-4 invoice-col">
<b>Invoice #<?php echo date('M Y').'-'.$id?></b><br>
<br>
<b>Payment:</b> <?php $amount?><br>
<b>Duration:</b> <?php echo $duration ?>
</div>
</div>
<div class="row">
<div class="col-12 table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Qty</th>
<th>Station</th>
<th>Serial</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><?php echo $stationTitle; ?> </td>
<td><?php echo$ id?></td>
<td><?php echo $amount?></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<p class="lead">Date <?php echo date('d M Y')?></p>
<div class="table-responsive">
<table class="table">
<tr>
<th style="width:50%">Total:</th>
<td><?php $amount?></td>
</tr>
</table>
</div>
</div>
</div>
</div>
Here's my JavaScript code:
function PrintDiv() {
var divToPrint = document.getElementById('divToPrint');
var popupWin = window.open('', '_blank', 'width=400,height=300');
popupWin.document.open();
popupWin.document.write('<html><body style="width: 58mm " onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
I've also included an image link for reference. I'm looking to print a compact receipt with limited height.
https://i.sstatic.net/4G3qb.png
Thank you.