Friday 6 June 2014

Php : create pdf from html using mpdf


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.


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. Invoice.html
<!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 &amp; 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 pdf
The 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();

?>

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.

No comments:

Post a Comment