MPDF
Create the document in Html
The first step would be to make or design an invoice in html.
Absolute units
So height , width , margin , padding and anything can have units of mm , cm , in etc. Fonts should be specified in pt - point unit instead of px.
Tables vs div Tables give more consistent layouts in prints.
Rigid containers
<!DOCTYPE html>
<html>
<title><span class="o94i5x" id="o94i5x_8">Print Invoice</span></title>
<style>
*
{
margin:0;
padding:0;
font-family:Arial;
font-size:10pt;
color:#000;
}
body
{
width:100%;
font-family:Arial;
font-size:10pt;
margin:0;
padding:0;
}
p
{
margin:0;
padding:0;
}
#wrapper
{
width:180mm;
margin:0 15mm;
}
.page
{
height:297mm;
width:210mm;
page-break-after:always;
}
table
{
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-spacing:0;
border-collapse: collapse;
}
table td
{
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 2mm;
}
table.heading
{
height:50mm;
}
h1.heading
{
font-size:14pt;
color:#000;
font-weight:normal;
}
h2.heading
{
font-size:9pt;
color:#000;
font-weight:normal;
}
hr
{
color:#ccc;
background:#ccc;
}
#invoice_body
{
height: 149mm;
}
#invoice_body , #invoice_total
{
width:100%;
}
#invoice_body table , #invoice_total table
{
width:100%;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-spacing:0;
border-collapse: collapse;
margin-top:5mm;
}
#invoice_body table td , #invoice_total table td
{
text-align:center;
font-size:9pt;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding:2mm 0;
}
#invoice_body table td.mono , #invoice_total table td.mono
{
font-family:monospace;
text-align:right;
padding-right:3mm;
font-size:10pt;
}
#footer
{
width:180mm;
margin:0 15mm;
padding-bottom:3mm;
}
#footer table
{
width:100%;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background:#eee;
border-spacing:0;
border-collapse: collapse;
}
#footer table td
{
width:25%;
text-align:center;
font-size:9pt;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<p style="text-align:center; font-weight:bold; padding-top:5mm;">INVOICE</p>
<br />
<table class="heading" style="width:100%;">
<tr>
<td style="width:80mm;">
<h1 class="heading">Knowledge corner</h1>
<h2 class="heading">
123 Komally<br />
HYderabad - 50014<br />
Ap, INDIA<br />
Website :http://www.knowledgecornor.blogspot.in<br />
E-mail : knowledgecorner.srinu@gmail.com<br />
Phone : +1 - 123456789
</h2>
</td>
<td rowspan="2" valign="top" align="right" style="padding:3mm;">
<table>
<tr><td>Invoice No : </td><td>44-56-25</td></tr>
<tr><td>Dated : </td><td>06-Jul-2014</td></tr>
<tr><td>Currency : </td><td>IN</td></tr>
</table>
</td>
</tr>
<tr>
<td>
<b>Buyer</b> :<br />
Client Name<br />
Client Address
<br />
City - Pincode , Country<br />
</td>
</tr>
</table>
<div id="content">
<div id="invoice_body">
<table>
<tr style="background:#eee;">
<td style="width:8%;"><b>Sl. No.</b></td>
<td><b>Product</b></td>
<td style="width:15%;"><b>Quantity</b></td>
<td style="width:15%;"><b>Rate</b></td>
<td style="width:15%;"><b>Total</b></td>
</tr>
</table>
<table>
<tr>
<td style="width:8%;">1</td>
<td style="text-align:left; padding-left:10px;"><span class="o94i5x" id="o94i5x_7">Software Development</span><br />Description : Upgradation of telecrm</td>
<td class="mono" style="width:15%;">1</td><td style="width:15%;" class="mono">234.00</td>
<td style="width:15%;" class="mono">234.00</td>
</tr>
<tr>
<td colspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
<td>Total :</td>
<td class="mono">234.00</td>
</tr>
</table>
</div>
<div id="invoice_total">
Total Amount :
<table>
<tr>
<td style="text-align:left; padding-left:10px;">Two Hundred And Thirty Four only</td>
<td style="width:15%;">IN</td>
<td style="width:15%;" class="mono">234.00</td>
</tr>
</table>
</div>
<br />
<hr />
<br />
<table style="width:100%; height:35mm;">
<tr>
<td style="width:65%;" valign="top">
Payment Information :<br />
Please make cheque payments payable to : <br />
<b>ABC Corp</b>
<br /><br />
The Invoice is payable within 7 days of issue.<br /><br />
</td>
<td>
<div id="box">
E & O.E.<br />
For Knowledge Corner<br /><br /><br /><br />
Authorised Signatory
</div>
</td>
</tr>
</table>
</div>
<br />
</div>
<htmlpagefooter name="footer">
<hr />
<div id="footer">
<table>
<tr><td>Software Solutions</td><td>Web Solutions</td><td>Mobile Solutions</td></tr>
</table>
</div>
</htmlpagefooter>
<sethtmlpagefooter name="footer" value="on" />
</body>
</html>
Convert the html to pdfThe php code to convert the html to pdf would be :
<?php
include("MPDF53/mpdf.php");
$mpdf=new mPDF('c','A4','','' , 0 , 0 , 0 , 0 , 0 , 0);
$mpdf->SetDisplayMode('fullpage');
$mpdf->list_indent_first_level = 0; // 1 or 0 - whether to indent the first level of a list
$mpdf->WriteHTML(file_get_contents('invoice.html'));
$mpdf->Output();
?>
mpdf library enables tags like htmlpagefooter which make it very easy to add html footers etc to the pdf pages.
No comments:
Post a Comment