After running my code to window print the table (report), the output is displayed below:
https://i.sstatic.net/chZ2b.png
This is the code I used:
CSS
@media print {
body * {
visibility: hidden;
}
#reportArea, #reportArea * {
visibility: visible;
}
#reportArea {
position: absolute;
left: 0;
top: 0;
}
}
HTML (blade):
<button type="submit" class="btn btn-success hidden-print" onclick="window.print();">
<i class="fa fa-print"></i> Print
</button>
<div id="reportArea">
<div class="box-body table-responsive no-padding">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Room #</th>
<th>Invoice #</th>
<th>Client Name</th>
<th>Booked At</th>
<th>Reservation From</th>
<th>Reservation To</th>
<th>Amount</th>
</thead>
</tr>
<tbody>
@foreach($reservations as $res)
<tr>
<td>{{ $res -> room -> room_number }}</td>
<td></td>
<td>{{ $res -> client -> name }}</td>
<td>{{ date('F d, Y', strtotime($res -> created_at )) }}</td>
<td>{{ date('F d, Y', strtotime($res -> reservation_from)) }}</td>
<td>{{ date('F d, Y', strtotime($res -> reservation_to)) }}</td>
<td>{{ $res -> charge -> sum('price') }}</td>
</tr>
@endforeach
<tr>
<td colspan="2"><strong>Total:</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>{{ $total }}</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
If you have any suggestions on how I can optimize paper usage, especially considering the large empty spaces on the left and right sides, or if there's a more efficient way to accomplish this task, please let me know. Thank you.