Programming, tutorials, mechatronics, operating systems, and other tech stuff

Generate Printable Invoice in PHP using FPDF library

8 comments
Nowadays, when almost everything is connected to internet. More people chooses web based application (or "webapp" in short) over desktop-based applications with various reasons but mostly because its flexibility and mobility.
WebApp can become potentially powerful in computing power compared to stand alone application. Because the processing is done in server-side, even a low-end mobile devices can access robust information which requires complex calculation and can also manipulate it.
But nothing is perfect, web app also have a lot of drawbacks. One of them is when it comes to physical document handling, such as document printing.

PDF generation in PHP

PDF generation in PHP gave a web-based application abilities to represent a printable, fixed- layout document to millimeter precision.
Such as printable invoices, printable reports, printable manifests, and other printable  documents.
In short, PDF generation is a best method to represent a printable document, compared to  any other method such as html, which is "dynamic layout" by nature.
The down side is, we cannot alter the produced document and it depends on browser's PDF  plugins whether to display it immediately on browser or just download it.
Here's a tutorial of how to make a PDF invoice in PHP using FPDF class.
You can download fpdf library package then extract it's content to your htdocs directory.
This package contains fpdf php library, example tutorials, and documentation.
FPDF has many methods to make and manipulate PDF content as you can see in its  documentation here.

Make PDF Invoice using PHP FPDF library

First, you need to download the fpdf library here.
Then extract it somewhere in your htdocs directory. Then make a php file as the pdf generator.
In this example, i am going t use portrait, A4 size paper with mm measurement unit.

<?php
//call the FPDF library
require('fpdf17/fpdf.php');

//A4 width : 219mm
//default margin : 10mm each side
//writable horizontal : 219-(10*2)=189mm

//create pdf object
$pdf = new FPDF('P','mm','A4');

?>

Next, add a blank page using $pdf->AddPage(); method. Then output the result using $pdf->Output(); method.

<?php
//call the FPDF library
require('fpdf17/fpdf.php');

//A4 width : 219mm
//default margin : 10mm each side
//writable horizontal : 219-(10*2)=189mm

//create pdf object
$pdf = new FPDF('P','mm','A4');
//add new page
$pdf->AddPage();
//output the result
$pdf->Output();
?>

You'll get something like:

Congratulations! you've just made a pdf file by yourself... Now what?...

Add content to pdf file with cells

Text content in pdf is written in cells (Imagine cells as a container). You can put text inside cells, and each cells has its own properties such as width, height, and border.
Cells are stacked horizontally one after another from left to right and end with a cell which defined as a line ending by its parameter or until $pdf->Ln(); method is invoked (imagine what "enter" button do when you're typing in text editor).
Fpdf cell method have following parameters (taken from it's documentation here):
Cell(float w [, float h [, string txt [, mixed border [, int ln [, string align [, boolean fill [, mixed link]]]]]]])
w and h is for width and height.
txt is the content.
border to define the border. It could be 1 for all border, 0 for no border, and combination between L,T,R,B. Please refer to the doc for further explanation. what we need right now is 1 and 0.
ln is line ending. 1 to end the line with this cell, otherwise 0.
align is the text alignment L,C,R, no justified.
as for fill and link, we don't need it right now so kindly refer to the docs.

Setting font properties in pdf

Before adding anything to the pdf, we should first set the font that will be used. Following is the SetFont method parameters taken from here:
SetFont(string family [, string style [, float size]])
family is the font such as 'Arial','Courier','Times', etc. Should be standard font or font defined by AddFont method (i'll explain it in another tutorial, meanwhile please watch this).
style is either one or combination between B,I,U or an empty string for none.
size is the font size in points.

Now we got the basics required to build our pdf invoice, let's move to the main point.

Make the printable PDF Invoice

Here is the codes for the invoice. Put this just after AddPage() and before Output().
I included some comments as explanation in the code.

//set font to arial, bold, 14pt
$pdf->SetFont('Arial','B',14);

//Cell(width , height , text , border , end line , [align] )

$pdf->Cell(130 ,5,'GEMUL APPLIANCES.CO',0,0);
$pdf->Cell(59 ,5,'INVOICE',0,1);//end of line

//set font to arial, regular, 12pt
$pdf->SetFont('Arial','',12);

$pdf->Cell(130 ,5,'[Street Address]',0,0);
$pdf->Cell(59 ,5,'',0,1);//end of line

$pdf->Cell(130 ,5,'[City, Country, ZIP]',0,0);
$pdf->Cell(25 ,5,'Date',0,0);
$pdf->Cell(34 ,5,'[dd/mm/yyyy]',0,1);//end of line

$pdf->Cell(130 ,5,'Phone [+12345678]',0,0);
$pdf->Cell(25 ,5,'Invoice #',0,0);
$pdf->Cell(34 ,5,'[1234567]',0,1);//end of line

$pdf->Cell(130 ,5,'Fax [+12345678]',0,0);
$pdf->Cell(25 ,5,'Customer ID',0,0);
$pdf->Cell(34 ,5,'[1234567]',0,1);//end of line

//make a dummy empty cell as a vertical spacer
$pdf->Cell(189 ,10,'',0,1);//end of line

//billing address
$pdf->Cell(100 ,5,'Bill to',0,1);//end of line

//add dummy cell at beginning of each line for indentation
$pdf->Cell(10 ,5,'',0,0);
$pdf->Cell(90 ,5,'[Name]',0,1);

$pdf->Cell(10 ,5,'',0,0);
$pdf->Cell(90 ,5,'[Company Name]',0,1);

$pdf->Cell(10 ,5,'',0,0);
$pdf->Cell(90 ,5,'[Address]',0,1);

$pdf->Cell(10 ,5,'',0,0);
$pdf->Cell(90 ,5,'[Phone]',0,1);

//make a dummy empty cell as a vertical spacer
$pdf->Cell(189 ,10,'',0,1);//end of line

//invoice contents
$pdf->SetFont('Arial','B',12);

$pdf->Cell(130 ,5,'Description',1,0);
$pdf->Cell(25 ,5,'Taxable',1,0);
$pdf->Cell(34 ,5,'Amount',1,1);//end of line

$pdf->SetFont('Arial','',12);

//Numbers are right-aligned so we give 'R' after new line parameter

$pdf->Cell(130 ,5,'UltraCool Fridge',1,0);
$pdf->Cell(25 ,5,'-',1,0);
$pdf->Cell(34 ,5,'3,250',1,1,'R');//end of line

$pdf->Cell(130 ,5,'Supaclean Diswasher',1,0);
$pdf->Cell(25 ,5,'-',1,0);
$pdf->Cell(34 ,5,'1,200',1,1,'R');//end of line

$pdf->Cell(130 ,5,'Something Else',1,0);
$pdf->Cell(25 ,5,'-',1,0);
$pdf->Cell(34 ,5,'1,000',1,1,'R');//end of line

//summary
$pdf->Cell(130 ,5,'',0,0);
$pdf->Cell(25 ,5,'Subtotal',0,0);
$pdf->Cell(4 ,5,'$',1,0);
$pdf->Cell(30 ,5,'4,450',1,1,'R');//end of line

$pdf->Cell(130 ,5,'',0,0);
$pdf->Cell(25 ,5,'Taxable',0,0);
$pdf->Cell(4 ,5,'$',1,0);
$pdf->Cell(30 ,5,'0',1,1,'R');//end of line

$pdf->Cell(130 ,5,'',0,0);
$pdf->Cell(25 ,5,'Tax Rate',0,0);
$pdf->Cell(4 ,5,'$',1,0);
$pdf->Cell(30 ,5,'10%',1,1,'R');//end of line

$pdf->Cell(130 ,5,'',0,0);
$pdf->Cell(25 ,5,'Total Due',0,0);
$pdf->Cell(4 ,5,'$',1,0);
$pdf->Cell(30 ,5,'4,450',1,1,'R');//end of line

Save then refresh your browser. If everything is alright. you should have something like this.
Congratulation! You've just made a printable pdf invoice.

If by any chance you're still confused after following this tutorial, please do enjoy this video-version of this tutorial. And if you want the source code, feel free to ask me in the comment section of aforementioned video.

8 comments :

  1. Thanks for sharing,. I enjoy reading of this article a lot. I love to do PSD to Cratejoy conversion in programming languages.

    ReplyDelete
  2. kit tattoo When Cortez landed on the Mexican coast in 1519 he was horrified to find the natives practicing devil worshiping and had somehow permanently marked images of their idols on their skin. He called it the work of the devil.

    ReplyDelete
  3. mas, kalo semisal ngambil data di database nya text nya banyak itu harus diapaain mas biar nggak lurus gitu isiny di cell nya.

    ReplyDelete
    Replies
    1. Pakai Multicell mas.
      Misal:

      $message = "Thank you for ordering at the Nettuts+ online store. Our policy is to ship your materials within two business days of purchase. On all orders over $20.00, we offer free 2-3 day shipping. If you haven't received your items in 3 busines days, let us know and we'll reimburse you 5%.\n\nWe hope you enjoy the items you have purchased. If you have any questions, you can email us at the following email address:";
      $pdf->MultiCell(0, 15, $message);

      Delete
  4. I just want to let you know that I just check out your site and I find it very interesting and informative.. online invoice app

    ReplyDelete