September 03, 2018

Convert HTML to PDF in PHP using DomPDF

Dompdf has been the most popular choice of developers for creating PDFs of HTML pages for the features it provides, like support for CSS, images, tables, and font embedding. Learn how to convert a web document into a PDF with a PHP library.

Create a PDF in PHP using domPDF
Demo Download

A PDF (Portable Document Format) is a file format that consists of text, tables and graphic images like a Word document. This document ensures that the content it contains looks the same on all applications used to view it.

In a web application, PDF documents can be created for various purposes like generating invoices, reports, flyers, resumes, and application manuals. Learn in this post how to convert HTML to PDF document in PHP using Dompdf with a working demo.

 

What is Dompdf?

Dompdf is a free, open-source PHP library that developers use to generate PDFs of a webpage. It allows us to create a PDF of HTML in PHP in a few simple steps. It has an HTML layout rendering engine written in PHP with support for many features like CSS2 and CSS3, Images, Loading of external stylesheets, and renders an HTML document as Portable Document Format for printable versions of web pages, invoices, reports, and other documents.

Dompdf Features:

  • Supports most CSS 2.1 and a few CSS3 properties.
  • Supports most representational HTML 4.0 attributes.
  • Supports external stylesheets.
  • Supports complex tables, including row & column spans, separate & collapsed border models, and individual cell styling.
  • Images support.
  • Basic SVG support with some limitations.

Prerequisites & Requirements:

  • PHP version 7.1 or higher
  • DOM extension
  • MBString extension
  • php-font-lib
  • php-svg-lib

This article demonstrates how to save HTML as a PDF in PHP with a few easy steps, with a working demo. Before we begin, we will need to either download the stable version of Dompdf 3.0.0 or download it via Composer.

composer require dompdf/dompdf
 

How to Convert HTML to PDF in PHP with Dompdf

We will generate a PDF of a dummy curriculum vitae, and the files we are going to need are:

  • constants.php: Holds two constants for use when generating a PDF. We need these for absolute URLs.
  • index.html: which contains front-end code to call an action to generate and download a PDF.
  • download-pdf.php: which actually contains the HTML that we are going to convert to PDF.
  • style.css: contains styles for the HTML file.

Step 1: Define Constants for Use in PDF Generation

The following constants are defined for use with absolute URLs when generating PDFs.

constants.php 

<?php
define('BASE_URL', 'https://' . $_SERVER['SERVER_NAME']);
define('BASE_PATH', $_SERVER['DOCUMENT_ROOT']);
 

Step 2: Create an HTML User Interface to Download a PDF

Create an HTML page with a button to download a PDF. When a user clicks this button, the script to generate a PDF is called using Dompdf. It then downloads the content we have created.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Convert HTML to PDF in PHP using Dompdf - Demo</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
        <style>
            * {
                box-sizing: border-box;
            }
            html, body {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: #f6f6f6;
                font-family: "Segoe UI", "Roboto", "Helvetica", sans-serif;
                font-size: 15px;
                font-weight: normal;
                font-style: normal;
            }
            a {
                text-decoration: none;
                color: #3778cd;
            }
            .container {
                max-width: 1140px;
                width: 100%;
                margin-right: auto;
                margin-left: auto;
                padding-right: 15px;
                padding-left: 15px;
            }
            .py-4 {
                padding-top: 1rem;
                padding-bottom: 1rem;
            }
            .btn {
                display: inline-block;
                padding: 5px 10px;
                cursor: pointer;
                font: inherit;
            }
            .btn-green {
                background: #009549;
                border: 1px solid #009549;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <section class="section py-4">
            <div class="container">
                <a href="download-pdf.php" type="button" class="btn btn-green">Download PDF</a>
            </div>
        </section>
    </body>
</html>

Step 3: Convert HTML to PDF using Dompdf (PHP Script)

Our script file download-pdf.php is generating the PDF using the Dompdf library in PHP. In this file, we are first creating HTML content for the PDF and then converting HTML to PDF in the following steps:

  • We create an HTML content with the desired layout for the PDF.
  • Then we instantiate the Dompdf object with HTML5 parser enabled and remote URLs enabled.
  • We set the paper size for PDF to A4.
  • Then we pass the HTML to the Dompdf object class we want to generate a PDF of.
  • Next, render the HTML as a PDF document for download.
  • Next, download HTML as PDF by using the stream function of Dompdf.

download-pdf.php

<?php
include 'constants.php';

ob_start();
?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <link rel="stylesheet"
                  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
            <link rel="stylesheet" href="<?= BASE_URL; ?>/downloads/convert-html-to-pdf-in-php-using-dompdf/css/style.css"/>
        </head>
        <body>
            <main class="main">
                <div class="head">
                    <div class="image">
                        <img src="<?= BASE_URL; ?>/downloads/convert-html-to-pdf-in-php-using-dompdf/images/avatar.png"/>
                    </div>
                    <div class="title">
                        <h3>John Doe</h3>
                        <h4>Curriculum Vitae</h4>
                    </div>
                </div>
                <div style="float:none;clear:both;"></div>
                <div class="column-container">
                    <div class="column-left">
                        <div class="info-box">
                            <div class="box-heading">
                                Contact Info
                            </div>
                            <div class="box-content">
                                <ul>
                                    <li>
                                        <span class="fa-icon">&#xf095;</span>
                                        +1-555-6666
                                    </li>
                                    <li>
                                        <span class="fa-icon">&#xf0e0;</span>
                                        [email protected]
                                    </li>
                                    <li>
                                        <span class="fa-icon">&#xf08e;</span>
                                        www.website.com
                                    </li>
                                    <li>
                                        <span class="fa-icon">&#xf041;</span>
                                        Street No, City, Country
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="info-box">
                            <div class="box-heading">
                                Languages
                            </div>
                            <div class="box-content">
                                <ul>
                                    <li>
                                        <div class="skill-box">
                                            <span>English</span>
                                            <div class="progress">
                                                <div class="level" style="width: 70%;"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="skill-box">
                                            <span>French</span>
                                            <div class="progress">
                                                <div class="level" style="width: 55%;"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="skill-box">
                                            <span>Russian</span>
                                            <div class="progress">
                                                <div class="level" style="width: 45%;"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="skill-box">
                                            <span>German</span>
                                            <div class="progress">
                                                <div class="level" style="width: 40%;"></div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="info-box">
                            <div class="box-heading">
                                Skills
                            </div>
                            <div class="box-content">
                                <ul>
                                    <li>
                                        <div class="skill-box">
                                            <span>Communication</span>
                                            <div class="progress">
                                                <div class="level" style="width: 80%;"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="skill-box">
                                            <span>Adaptibility</span>
                                            <div class="progress">
                                                <div class="level" style="width: 75%;"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="skill-box">
                                            <span>Self Motivation</span>
                                            <div class="progress">
                                                <div class="level" style="width: 85%;"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="skill-box">
                                            <span>TeamWork</span>
                                            <div class="progress">
                                                <div class="level" style="width: 95%;"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="skill-box">
                                            <span>Time Management</span>
                                            <div class="progress">
                                                <div class="level" style="width: 98%;"></div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="info-box">
                            <div class="box-heading">
                                Introduction
                            </div>
                            <div class="box-content introduction">
                                Donec ornare facilisis commodo. Duis blandit lacinia velit, a gravida mi efficitur non.
                                Mauris hendrerit sodales dolor a tincidunt. Vestibulum auctor libero consectetur dictum rutrum.
                                Suspendisse potenti. Vivamus iaculis eget sem vel venenatis. Sed gravida porta viverra
                            </div>
                        </div>
                    </div>

                    <div class="column-right">
                        <div class="info-box">
                            <div class="box-heading">
                                Experiences
                            </div>
                            <div class="box-content">
                                <div class="experience-box">
                                    <div class="experience-heading">Account Manager</div>
                                    <div class="experience-duration">Lorem Ipsum | 2015-Present</div>
                                    <div class="experience-details">
                                        Sed lorem ligula, pharetra eget purus a, tincidunt consequat diam.
                                        Maecenas laoreet, dolor id rutrum consequat, nisl lorem aliquet sem, id lacinia arcu
                                        tellus sed purus.
                                        Curabitur venenatis nulla sed risus consequat, a lacinia ante hendrerit.
                                    </div>
                                </div>

                                <div class="experience-box">
                                    <div class="experience-heading">Sales Exective</div>
                                    <div class="experience-duration">Lorem Ipsum | 2013-2015</div>
                                    <div class="experience-details">
                                        Quisque dictum feugiat odio ac eleifend. Integer eleifend sit amet ex et posuere.
                                        Phasellus id ultricies magna. Suspendisse consequat vitae leo accumsan lobortis.
                                        Duis ut sodales dolor. Aliquam massa ex, ultricies id imperdiet quis, ultricies ac sem.
                                    </div>
                                </div>

                                <div class="experience-box">
                                    <div class="experience-heading">Sales Assistant</div>
                                    <div class="experience-duration">Lorem Ipsum | 2010-2013</div>
                                    <div class="experience-details">
                                        Integer id gravida enim, luctus iaculis nunc. Vestibulum porttitor massa non tortor
                                        commodo scelerisque.
                                        Maecenas massa tellus, scelerisque vitae venenatis quis, ultricies id orci.
                                        Etiam volutpat odio vitae suscipit suscipit. Nam malesuada ex at porttitor auctor.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info-box">
                            <div class="box-heading">
                                Education & Courses
                            </div>
                            <div class="box-content">
                                <div class="education-block-left">
                                    <div class="title">University of Glosgow</div>
                                    <div class="education-details">PHD - Business & Finance | 2005</div>
                                    <div class="education-comments">Extra comments about education</div>
                                </div>
                                <div class="education-block-right">
                                    <div class="title">University of New York</div>
                                    <div class="education-details">MBA - Business & Finance | 2005</div>
                                    <div class="education-comments">Extra comments about education</div>
                                </div>
                                <div style="float:none;clear:both;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </body>
    </html>
<?php

$html = ob_get_contents();
ob_end_clean();

// If downloaded via composer
//require 'vendor/autoload.php';

// If downloaded package archive
require 'dompdf/autoload.inc.php';

use Dompdf\Dompdf;

$context = stream_context_create([
    'ssl' => [
        'verify_peer' => FALSE,
        'verify_peer_name' => FALSE,
        'allow_self_signed' => TRUE
    ]
]);

$dompdf = new Dompdf([
    'is_remote_enabled' => true,
    'is_html5_parser_enabled' => true
]);

$dompdf->setHttpContext($context);

$dompdf->setPaper('A4');
$dompdf->loadHtml($html);

$dompdf->render();
$dompdf->stream('sample-pdf', ['attachment' => true]);

Add PDF CSS Styles

Add necessary CSS styles for the PDF document that will be generated from HTML.

style.css

@page {
    size: A4 portrait;
    margin: 20px !important;
}
* {
    box-sizing: border-box;
}
html, body {
    margin:0;
    padding: 0;
    width: 794px;
    font-family: Helvetica, serif;
    font-size: 14px;
}
.clearfix {
    float:none;
    clear:both;
}
.fa-icon {
    font-family: FontAwesome, serif;
    width: 20px;
    display: inline-block;
    margin-top: 5px;
}
.head {
    height: 150px;
    margin-bottom: 20px;
}
.head .image,
.head .title {
    width: 150px;
    float: left;
    text-align: center;
    letter-spacing:5px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}
.head .image {
    z-index: 5;
}
.head .image img {
    border-radius: 70px;
    height: 140px;
    width: 140px;
    margin: 5px;
}
.head .title {
    background:  #e28b01;
    width: 754px;
    height: 150px;
    border-radius: 70px;
    margin-left: -150px;
}
.head .title h3 {
    font-size: 25px;
}
.column-container {
    height: 800px;
}
.column-left, .column-right {
    width: 275px;
    float: left;
}
.column-right {
    width:459px;
    padding-left: 20px;
}

.box-heading {
    background: #4F4F4F;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
}
.box-content {
    padding: 10px;
    margin-bottom: 20px;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    padding: 3px 0;
}
.skill-box span {
    width: 120px;
    display: inline-block;
    margin-right: 10px;
}
.skill-box .progress {
    display: inline-block;
    height: 10px;
    background: #ddd;
    width: 115px;
}
.skill-box .progress .level {
    background: #e28b01;
    height: 10px;
}
.introduction {
    text-align: justify;
}
.experience-heading,
.experience-duration {
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
.experience-duration {
    color: #888;
}
.experience-details {
    margin-bottom: 15px;
    text-align: justify;
}
.education-block-left {
    width: 50%;
    float: left;
}
.education-block-right {
    width: 50%;
    float: right;
}
.education-block-left > div,
.education-block-right > div {
    padding: 2px 8px;
}
.title {
    font-weight: bold;
}
.education-details {
    font-style: italic;
}
.education-comments {
    color: #888;
    font-size: 12px;
}

Dompdf is a free PHP library to create PDFs from HTML easily and efficiently. It can be used to easily generate PDF documents of HTML with one button click, as we demonstrated in this article while keeping control over layout.

Home