Monday, September 3, 2018
Create a PDF in PHP using domPDF
pdf phpdomPDF is HTML to PDF converter library written in PHP. It comes with many features like support for images including basic support for svg images, CSS2 support and some properties from CSS3.
Why use domPDF to convert HTML to PDF? Well domPDF has a HTML layout rendering engine written in PHP with support of many features like CSS2 and CSS3, Images, Loading of external stylesheets. Which means developers can easily create a PDF without needing to go through traditional PDF library's documentation get familiar with it. So you will need to download domPDF stable version domPDF 1.0.2.
domPDF Features:
- Supports most CSS 2.1 and a few CSS3 properties.
- Supports most presentational HTML 4.0 attributes.
- Supports external stylesheets.
- Supports complex tables, including row & column spans, separate & collapsed border models, individual cell styling
- Image support
- Basic SVG support with some limitations.
Requirements:
- PHP version 7.1 or higher
- DOM extension
- MBString extension
- php-font-lib
- php-svg-lib
We will be converting a demo curriculum vitae and files we are going to create are 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;
}