I'm using dompdf to generate pdf formatted receipts which than be printed using RP327 80mm Thermal Receipt Printer. But printed receipts are not fitting the paper properly. Here is an attached image of printed receipts pos receipt. Here is my html table which is converted to a pdf file
<?php
ob_clean();
$dompdf = new DOMPDF();
$dompdf->set_option('default_font', 'Courier');
$customPaper = array(0,0,340,650);
//$dompdf->set_paper($customPaper);
$dompdf->set_option('enable_css_float',true);
//$dompdf->set_paper("A3", "portrait");
$html =' <html>
<head><style>
.table { display: table; width: 100%; border-collapse: collapse; }
.table-row { display: table-row; }
.table-cell { display: table-cell; border: 1px solid black; padding: 1em; }
}
span { display: block; }
@page table {
size: 340px 650px;
margin: 0px;;
}
.table {
page: table;
page-break-after: always;
font-size: 20px;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row"><div class="table-cell" colspan="3" style="text-align: center"><img src="../../img/top-logo.png"></div></div>
<div class="table-row">
<div class="table-cell" ><span><b> Merchant: </b> '.$parceldetails['company'].' </span><span><b> Pick Addr: </b> '.$parceldetails['addr'].' </span><span><b> Mobile: </b> '.$parceldetails['mobile'].' </span></div>
<div class="table-cell" style="padding: 0px">
<div class="" >Delivery Date:</div><br>
<div class="" style="border-bottom: 1px solid #000000"> '.$parceldetails['r_delivery_time'].' at '.$parceldetails['bytime'].'</div>
<div class="">Agent:</div><br>
<div class=""> '.$parceldetails['name'].' </div>
</div>
</div>
<div class="table-row">
<div class="table-cell" colspan="3" style="text-align: center"> <b style="font-size: larger">'.$ecr.'</b></div>
</div>
<div class="table-row">
<div class="table-cell" colspan="1"><span><b>Customer Name:</b> '.$parceldetails['r_name'].'</span><span><b> Addr:</b> '.$parceldetails['r_address'].' </span><span><b> Mobile: </b> '.$parceldetails['r_mobile'].' </span></div>
<div class="table-cell" style="padding: 0px">
<div class="" style="border-bottom: 2px solid #000000; text-align: center"><b> '.$parceldetails['paymentmethod'].' </b></div>
<div class="" style="text-align: center"><b> '.$parceldetails['product_price'].' BDT </b></div>
</div>
</div>
<div class="table-row">
<div class="table-cell" style="text-align: center"> '.genarateQRCode($data).' </div>
<div class="table-cell" style="padding: 0px">
<div class="" style="border-bottom: 2px solid #000000; text-align: center; height:63px"> Delivered </div>
<div class="" style="text-align: center; min-height:63px"> Cancel </div>
</div>
<div class="table-cell" style="padding: 0px">
<div class="" style="border-bottom: 2px solid #000000; text-align: center; height:63px"> </div>
<div class="" style="text-align: center; min-height:63px""></div>
</div>
</div>
<div class="table-row">
<div class="table-cell" colspan="3">
<b style="margin-top:50px; margin-bottom:-10px; border-bottom: 1px solid #000000; font-size:10px; margin-left:10px">Agent signature</b>
<b style="margin-top:50px; margin-bottom:-10px; border-bottom: 1px solid #000000; font-size:10px; margin-left:50px">Receiver signature</b></div>
</div>
</div>';
$html .='<table class="table">
<tr>
<td colspan="3"><img src="../../img/top-logo.png"></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><span><b> Merchant: </b> '.$parceldetails['company'].' </span><span><b> Pick Addr: </b> '.$parceldetails['addr'].' </span><span><b> Mobile: </b> '.$parceldetails['mobile'].' </span></td>
<td>D. Date<span>'.$parceldetails['r_delivery_time'].'</span></td>
</tr>
<tr>
<td>Agent<span>'.$parceldetails['name'].'</span></td>
</tr>
<tr>
<td colspan="3">'.$ecr.'</td>
</tr>
<tr>
<td rowspan="2" colspan="2"><span><b>Customer Name:</b> '.$parceldetails['r_name'].'</span><span><b> Addr:</b> '.$parceldetails['r_address'].' </span><span><b> Mobile: </b> '.$parceldetails['r_mobile'].' </span></td>
<td><b>'.$parceldetails['paymentmethod'].'</b></td>
</tr>
<tr>
<td><b>'.$parceldetails['product_price'].' BDT</b></td>
</tr>
<tr>
<td rowspan="2" colspan="1">'.genarateQRCode($data).'</td>
<td>Delivered</td>
<td></td>
</tr>
<tr>
<td>Cancel</td>
<td></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3">Agent Signature Receiver Signature</td>
</tr>
</table>
</body>
</html>';
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("dompdf_out.pdf", array('Attachment' => 0));
<?>
According to the linked printer specs the printer is capable of printing to a width of either 72mm or 64mm. That translates to roughly 204pt and 181pt (respectively). Rather than relying on a larger paper size and limiting your content width I'd try to work within the constraints you have.
You should also keep in mind that dompdf translates pixel-based measurements into the appropriate point size based on the DPI specified for your document. If you want a one-to-one correspondence between your HTML document and the rendered PDF you should set the Dompdf DPI to 72 since the PDF PPI is fixed at 72.
With that in mind here's my advice. I'm assuming you're using Dompdf 0.6.x based on the method calls.
Set your paper size appropriately. Let's assume you have the 72mm width paper.
Set your DPI
If you're going to use a table for layout then you should just go ahead and use table elements. Styling DIVs with table display types will just cause them to be treated like table elements. What you have will work fine, but it will be clearer to you what's going on if you just use table elements.
Know that Dompdf be a bit quirky in relation to tables. One thing to keep in mind is that Dompdf won't allow table cells to be smaller than the contained content (for normally flowed content).
It's hard to give any input on why the printer is cutting off the content. I'd suggest cleaning up your code. I just noticed that you have the same content twice, once as DIVs styled to be table elements and a second time as an actual table.