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.

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.

Last Updated On : 22nd May 2013

Subscribe to get updates delivered to your inbox

62 Comments + Add Comment

  • Hello,

    I am using mpdf for converting php page to pdf file.It works fine on chrome but landscape orientation for A4 not working on m mozilla…any solution please

  • Hello All,

    I integrated mPDF lib in one of my web project with dynamic way and compatible with all PDF viewer but now facing the issue in Acrobat Reader DC, When i try to open PDF in acrobat reader saying Decoding problem or not import PDF properly.

    It would great help, If you can suggest any solution for this issue.

    Thanks !!

    Regards,
    Rakesh

  • Call to undefined function mb_internal_encoding() error has occure what is solution for that. i m using mpdf in cakephp and my php version is above 5

  • Hii
    i try to convert html page to pdf it work fine. But font size of text on pdf remain constant it does not changed according to font size given in m_pdf library ,Event not according to font size of html page’.In html i am using table.
    my library code is–

    param =$param;
    $this->pdf = new mPDF($this->param);
    }
    }

  • how can i make it work for different html page rather than just one?

  • Why is the width of the wrapper 180mm but the width of the page 210?

  • How to use with a html page whose data fill by angular js..?
    Is this possible ?

  • hi sir i am use this mpdf code but 40 rows of table after not display pdf

  • any idea about how to use it in lime survey please,,,,,

  • Hi Silver Moon,

    It’s Working fine but i want to change downloaded pdf file name,

    Current downloaded pdf is “mpdf.pdf” , how to change the name to our custom name ?

    please reply me….

    Thanks in Advance….

  • how to delete html file after generating pdf using mpdf

  • sir i want to add a vertical line in pdf file in left side so how can i do that ?

  • hello silver moon
    can you please show a example of dynamic php file pdf generation thankds

  • You little genius you, thanks v much really helpful.

  • will this work for google graphs like pie or bar? anyone tried out before this?

  • can you use a data from mysql database using this code?
    I have tried many times executing data but when it execute it displays all the php code.

  • i’m not able to echo database variable. Can you please help me come out of it… juggling since 3days but no result…

    • it depends on your application logic.

  • Hi, can this layout cope with an invoice whose body table spans more than one page. I’m trying to use this method to position a remittance advice on to pre-printed paper

    • Well I tried it and it works if the content spills on to another page. But if the body of the table is too big for the size of the footer then the elements overlap each other.

  • This is a really nice library, shame they went for the license that they did. FPDF, on which this is based, has a much more permissive license. I don’t really want to be giving away all my work just because I used this. LGPL would have been better. That’s why html2pdf wins out.

    Still, a nice implementation, if you’re not concerned about the licencing then very useful indeed.

  • Hi, I am a php newbie. Do you have tutorial on how to let user select data from mysql database and output the result to pdf?

    Thanks for the superb tutorial!

  • How to add background image of pdf……please help

    • check out the mpdf documentation.

  • Thanks a lot, It’s really helpful.

  • Thanks for this tutorial. Really helpful. But I face problem.
    When I submit form, I want to save data in DB first and than want to give direct pdf download link. When I do these two process at the same time, it save two records at one time. Please, how can I solve this ?

  • How To Email PDF file to Server?

    Thanks
    Shailendra

    • save the pdf as a file using this code
      the pdf can be saved to a file like this
      $mpdf->Output(‘filename.pdf’,’F’);

      then attach the pdf file to send over email

  • How to create from filename.php??? with php extension??
    please help me. . .

  • hello all bosses its very good solution.. but i have a problem like my invoice is generated though a single page invoice.php?id=1234
    so dynamic invoice is generated
    by using this example its not taking dynamic content.. so what to do :(

    • on your page invoice.php?id=1234
      first collect the whole invoice html into a variable like this

      $html = “……..“;

      then pass this variable to mpdf to generate the invoice.

  • hello boss
    i am having problem with invoice generateion of pdf

    my file is like invoice.php?id=xcvd001

    its not creating the pdf
    so how can do that.. its only good for static html page

    • you have to collect the whole html content of invoice.php script in a variable say $html
      and then pass that variable to mpdf function like this

      $mpdf->WriteHTML( $html );
      $mpdf->Output();

      this will generate the desired pdf output.

  • It really nice, I have tested it is working. Thanks for a great script

  • How do I add header for every pages ?
    pls help
    thx

  • How should i rename the PDF ??
    Please help me

  • i m callling all values from database….how it can be done

    • Construct the html in a variable using all values from the database. Then pass the variable to the WriteHTML function.
      $mpdf->WriteHTML( $my_html );

  • But How To Get Output in Landscape.
    i use this but it didn’t work.

    $mpdf=new mPDF(‘c’,’A4′,”,” , 0 , 0 , 0 , 0 , 0 , 0,’L’);

    • ‘A4’ -> ‘A4-L’

  • Awesome. Thanks so much for this. Got it working beautifully.

  • Very Whell!

  • hiii this is very great tut……i like it……………can any one tell how invoice.html fields make dynamic:
    eg:
    Name

    i tried a lot but it shows error………………

  • i am going to genereate an invoice in such a way that an html table value should be printed in pdf file and then this pdf file is emailed to the number of email address.
    Thanks.

  • i am not able to get pdf of dynamic php web page i am getting the php coding in the pdf document could you please any one help me regarding this

    Thanks
    Abdul.

    • need to see your code

  • hy, base on your tutorial I’m interest to use mpdf into cakephp ,,do you know how to use this in cakephp??

    thx before,, sori if my English not good :D,,I hope you rep my comment

  • Thank you for this tutorial. I looked at many different html-to-pdf libraries and mpdf seems to work the best, and be the easiest to implement.

  • Hi,

    I want to set the height of PDF document according to the content of HTML page.

    What I am doing first get the offsetHeight of whole container of text(header,content and footer) in pixels then convert it into mm byusing the formula (height in mm = 0.26(height in pixels)) and passing this height to mpdf object, but this is not making the height of PDF document correctly, extra white space is coming after the content end.

    Is there any way to set height auto of PDF content.
    Please suugest.

    Thanks

  • Nice job, just need some help on the following.
    Im pulling fields from a mySQL DB, when I open the html file all is well and my db fields pull through, however when I pull up the pdf file it shows . Any idea how to get around this.

    Thanks in advance.

    N

  • Hi,
    I am using mpdf and works fine in converting html pages but it shows error when converting php pages. I have to display many forms that should retrieve data from the database itself but it shows only the variable instead of value.

    {e-g} First Name like in the pdf. could u please help me to get rid of this immediately.

    Thanks in advance

  • I use pdfservices.net, creates files html, css, php, ajax, mysql, printable and autoprint. is better than any class I’ve used.

    • It depends on how much is required. For creating basic and little complex pdfs , mpdf is sufficient.
      Moreover its better to have an inbuilt library in your application rather than using a 3rd party api for such tasks.

  • how can i change the target directory of pdf file. Please help

    • save the file at a specified path using the output function :

      $mpdf->Output( ‘/path/filename.pdf’ , ‘F’ );

  • MPDF does the work well!
    I still do have a little problem: my footer becomes very very small in my PDF, how do I configure that?

    Regards, Roger

  • Hello thanks for the tutorial it works well on most websites however it does not work for my invoice printing that is required. The invoices are prepared using a mysql query so the URL to the html version of the page is for example /invoicedisplay.php?id=70 mpdf doesnt seem to be able to deal with the ?id=70 do you know how to get around this?

    Thanks in advance

    • Dear Sam,

      Use the full URL, than it will work. I had the same issue myself and this worked out for me.

      Regards, Roger

Leave a comment