July 13, 2016 5:09 pm

Creating PDFs from HTML and CSS with PHP and Dompdf

In this tutorial, we are going to show you how to show the user dynamically-generated PDFs from your web application that relies on PHP. We are going to use a third-party library called Dompdf that enables us to create PDFs and save them to the server or directly display them to users using only HTML and CSS.convert-html-to-pdf

To start with, let us install Dompdf. The easiest way to add Dompdf to your project is to use Composer. To see how to install Composer, do follow https://getcomposer.org/download/. Once you have it on your machine, you can navigate to the directory where your web application is located (usually using the cd command) in your Command line/Terminal and type composer require dompdf/dompdf. This will install Dompdf and all you have to do is include it in your desired files and use it. Composer is a dependency manager similar to npmfor Node.js but for PHP and it is a good idea to use it. If you do not wish to use Composer, you can directly download the Dompdf library from https://github.com/dompdf/dompdf/releases and unzip it in your desired folder.

Once you have Dompdf, let us create a simple HTML template to show to the user as PDF. Below is a PHP file which serves for the template of the PDF. It is a dummy invoice for an online order. We expect an $order array which would contain the keys that will participate in the PDF – such as the name of the user, the name of the ordered product, its price, expected delivery date and so on. Then, the PHP script just displays some HTML and fills it with possibly dynamically-generated values related to the specific order. Notice that the template also loads an external stylesheet – Bootstrap and that we define a style tag (there is no need to place it in the head tag or create a head tag) that highlights the dynamically-generated values inside the invoice. The style tag also loads a custom font from Google Fonts which we will use for the invoice.

Pdf-template/template.php

Then, to display the PDF to the user, we create an order array and fill with the values related to the order. Afterwards, we create the template by using output buffering to store the template’s contents in a variable.

Index.php

Then, we load our Composer dependencies (Composer creates a vendor folder with an autoload.php file which loads all libraries loaded with Composer when required)

Index.php

If you did not use Composer, Dompdf has an autoloader itself and you would just have to use it instead. The require statement should be something like: require_once ‘dompdf/autoload.inc.php’;  but the path to Dompdf’sautoload.inc.php file may vary in your situation.

After we have loaded Dompdf, all we have to do is pass it the HTML template and display the PDF in the user’s browser. We initialize the Dompdf class, then we pass it the HTML template (the $template variable) and stream the PDF to the browser giving the PDF the name of invoice.pdf.

Index.php

Now, whenever we access index.php, we will end up with a PDF that looks like this:

Creating PDFs from HTML screenshot1

If we want to save the PDF to the server for reference – we need only 1-2 more lines of code. We get a string with the contents of the PDF file using $dompdf->output(), save it in a variable or directly put it into a file with an arbitrary name.

Adding one line is sufficient to save the PDF on our server:

Although, you would want a strict naming convention and not naming your invoices based on randomness. Unless you are okay with PDFs being overwritten from time to time when chance brings the same numbers.

Creating PDFs from HTML screenshot2

I guess, that’s it. You can now generate cool PDFs without much effort, hopefully.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:
  • Thank you very much.

  • Julien Taybegas

    Thanks for clarifying that !
    But i have a problem with integrating Google Fonts to the Dompdf. Is it possible to generate PDFs with fonts using a CDN (not installing those on the server) ??