Php : create pdf from html using mpdf

By | February 14, 2018
69 Comments

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 & 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.

About Silver Moon

A Tech Enthusiast, Blogger, Linux Fan and a Software Developer. Writes about Computer hardware, Linux and Open Source software and coding in Python, Php and Javascript. He can be reached at [email protected].

69 Comments

Php : create pdf from html using mpdf
  2. amit

    Hi,

    If we used MPDF for generating pdf but this pdf is fastest to load dynamic data having data more than 100k?
    Please suggest.

    Reply
  3. monali

    hi
    I am using mpdf and works fine in converting html pdf. could you plz help me? i want a header and footer fix for all pages.

    Thank You!!

    Reply
  4. surabhi

    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

    Reply
  5. Rakesh

    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

    Reply
  6. devashree

    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

    Reply
  7. Pradeep kushwaha

    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);
    }
    }

    Reply
  14. srinuchilukuri

    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….

    Reply
  21. rutvi

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

    Reply
  22. mark

    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

    Reply
    1. mark

      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.

      Reply
  23. Andy Powell

    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.

    Reply
  24. hlmy

    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!

    Reply
  27. zune

    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 ?

    Reply
    1. Silver Moon Post author

      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

      Reply
  30. kamlesh

    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 :(

    Reply
    1. Silver Moon Post author

      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.

      Reply
  31. Kamlesh Rathore

    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

    Reply
    1. Silver Moon Post author

      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.

      Reply
    1. Silver Moon Post author

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

      Reply
  36. Ameya

    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’);

    Reply
  39. sreenath

    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………………

    Reply
  40. Ali Hassan

    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.

    Reply
  41. Abdul

    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.

    Reply
  42. Arifin

    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

    Reply
  43. Garth

    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.

    Reply
  44. Indresh

    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

    Reply
  45. Neil

    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

    Reply
  46. asfa

    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

    Reply
  47. Steve

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

    Reply
    1. Silver Moon Post author

      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.

      Reply
  49. Roger

    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

    Reply
  50. Sam

    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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *