
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"></span> +1-555-6666 </li> <li> <span class="fa-icon"></span> [email protected] </li> <li> <span class="fa-icon"></span> www.website.com </li> <li> <span class="fa-icon"></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; }