MPDF
Many php applications need to create pdf of documents like invoice , receipt and even id card etc. In this article we shall create a pdf invoice using the mpdf pdf creation library. Mpdf is made in php without any other external library. Mpdf parses css much better than any other free pdf libraries like tcpdf and creates pdf files which resemble the original html file to a large extent. Along with html to pdf, mpdf can also be used to create 1d barcodes of various formats.
Mpdf can be downloaded from http://www.mpdf1.com/mpdf/
Create the document in Html
The first step would be to make or design an invoice in html.
Absolute units
Use CSS and absolute measurement units like mm instead of px. Absolute units give the elements "real" dimensions instead of relative like pixel. The length/width of pixel measured elements will depend on dpi settings etc of the printer and will not give consistent printouts across different machines.
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
All containers like a div , or a td should have right height and width , otherwise if they dont contain anything , they will "flexibly" shrink , spoiling the whole print layout.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Print Invoice</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">ABC Corp</h1>
<h2 class="heading">
123 Happy Street<br />
CoolCity - Pincode<br />
Region , Country<br />
Website : www.website.com<br />
E-mail : [email protected]<br />
Phone : +1 - 123456789
</h2>
</td>
<td rowspan="2" valign="top" align="right" style="padding:3mm;">
<table>
<tr><td>Invoice No : </td><td>11-12-17</td></tr>
<tr><td>Dated : </td><td>01-Aug-2011</td></tr>
<tr><td>Currency : </td><td>USD</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;">Software Development<br />Description : Upgradation of telecrm</td>
<td class="mono" style="width:15%;">1</td><td style="width:15%;" class="mono">157.00</td>
<td style="width:15%;" class="mono">157.00</td>
</tr>
<tr>
<td colspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
<td>Total :</td>
<td class="mono">157.00</td>
</tr>
</table>
</div>
<div id="invoice_total">
Total Amount :
<table>
<tr>
<td style="text-align:left; padding-left:10px;">One Hundred And Fifty Seven only</td>
<td style="width:15%;">USD</td>
<td style="width:15%;" class="mono">157.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 &amp; O.E.<br />
For ABC Corp<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>Mobile Solutions</td><td>Web Solutions</td></tr>
</table>
</div>
</htmlpagefooter>
<sethtmlpagefooter name="footer" value="on" />
</body>
</html>
Here is the invoice in : HTML
Its a simple design made using tables and css styles. The html invoices is formatted enough to take a printout or email as attachment.
Convert the html to pdf
The php code to convert the html to pdf would be :
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();
The pdf invoice is HERE.
Simple and fast. The mpdf library directly converts the html file into a pdf. It parses the CSS and applies the corresponding styles to the pdf document in a very effective manner , making the pdf look the same as the html file.
mpdf library enables tags like htmlpagefooter which make it very easy to add html footers etc to the pdf pages.
The footer for the above invoice is generated using :
<htmlpagefooter name="footer"> <hr /> <div id="footer"> <table> <tr><td>Software Solutions</td><td>Mobile Solutions</td><td>Web Solutions</td></tr> </table> </div> </htmlpagefooter> <sethtmlpagefooter name="footer" value="on" />
No need to call any functions or anything in the php code. Everything lies in the html itself.
So many different kind of pdf documents like invoices , money receipts , fillup forms and reports etc can be generated using php and mpdf library.
Hi,
How can I link the name, the client’s address with the query of the mysql database. Should I go inside php? You can indicate an example, thank you. would it be something like client?> ???
How to convert just one div of my html to pdf?
Hi,
I am new at mpdf.I want to show a date and image stored in mysql database in my pdf. I save the image link in database. So how can I show a date and image for a specific id in my pdf file?