Sunday, September 2, 2018

Create a PDF in PHP using domPDF

Today I am going to show you how you can easily create PDF document of any html using domPDF. domPDF is PHP library which converts HTML to PDF.

Create a PDF in PHP using domPDF
Why use domPDF? Well domPDF supports many features like border radius, PNG images, Imagick etc. So you will need to download domPDF stable version 0.8.2.

Files we are going to create to achieve this. index.php which contains front code to call an action for download. download-pdf.php which actually contains the html that we are going convert to pdf and last the style.css contains styles for the html file.

index.php

<!DOCTYPE html>
<html>
    <head>
        <title>Create PDF in PHP using dompdf</title>
        <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
        <style>
            *{
                box-sizing: border-box;
            }
            html,body{
                margin: 0px;
                padding: 0px;
            }
            body{
                background: #f0f0f0;
                font: normal normal 14px Open Sans,Verdana, Arial;
            }
            a {
                text-decoration: none;
                color: #3778cd;
            }
            .section{
                padding: 15px;
            }
            .main-container{
                max-width: 1024px;
                margin: 0px auto;
            }
            .btn{
                display: inline-block;
                padding: 5px 10px;
                border: 1px solid #ddd;
            }

            .btn-green{
                background: #00a65a;
                border: 1px solid #009549;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="main-container">
            <div class="section">
                <a href="download-pdf.php" type="button" class="btn btn-green">Download PDF</a>
            </div>
        </div>
    </body>
</html>


download-pdf.php

<?php
ob_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
        <link href="css/style.css" rel="stylesheet" />
    </head>
    <body>
        <div class="main-container">
            <div class="head">
                <div class="image">
                    <img src="images/no-image.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">
                            Lorem  Ipsum  is  simply  dummy  text  of  the  printing  and  typesetting
                            industry. Lorem Ipsum has been the industry standard dummy text ever
                            since  the  1500s,  when  an  unknown  printer  took  a  galley  of  type  and
                            scrambled it to make a type specimen book
                        </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">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                    Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
                                </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">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                    Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
                                </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">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                    Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
                                </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>
        </div>
    </body>
</html>
<?php
$html = ob_get_contents();
ob_end_clean();

include("dompdf/autoload.inc.php");
use Dompdf\Dompdf;

$dompdf = new Dompdf();
$dompdf->loadHtml($html);
$dompdf->set_paper("letter");
$dompdf->render();
$dompdf->stream("sample-pdf");
?>

style.css

html, body {
    margin:0px;
    padding: 0px;
    width: 816px;
    font-family: Helvetica;
    font-size: 14px;
}
.fa-icon{
    font-family: FontAwesome;
    width: 20px;
    display: inline-block;
    margin-top: 5px;
}
.main-container{
    padding: 20px;
}
.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: 776px;
    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:481px;
    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: 0px;
    padding: 0px;
    list-style: none;
}
ul li{
    padding: 3px 0px;
}
.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;
}