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;
}