September 03, 2018
Convert HTML to PDF in PHP using DomPDF
DomPDF is a free PHP library to convert HTML to PDF. DomPDF has been the most popular choice of developer for creating PDF of HTML pages for the features it provides like support for CSS, images, tables and fonts embedding.
A PDF (Portable Document Format) is a file format consisting of texts and graphic images. A PDF document is used to share information in a format which ensures the content looks same on all platforms or applications.
In a web application PDF documents can be created for various purposes like generating invoices, reports, flyers, resumes and application manuals. In this post we will learn how to convert HTML to PDF with DomPDF in PHP.
DomPDF is a free open-source PHP library developers use to convert HTML to PDF in PHP in few simple steps. It has a HTML layout rendering engine written in PHP with support of many features like CSS2 and CSS3, Images, Loading of external stylesheets and renders an HTML document as PDF for printable versions of web page, 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, individual cell styling.
- Images support.
- Basic SVG support with some limitations.
Requirements:
- PHP version 7.1 or higher
- DOM extension
- MBString extension
- php-font-lib
- php-svg-lib
This article will show you how to convert HTML to PDF with DomPDF in PHP in few simple steps and working demo. Before you begin you will need to either download domPDF stable version Dompdf 3.0.0 or download it via composer.
composer require dompdf/dompdf
We will generate a PDF of dummy curriculum vitae and the files we are going to need are:
- index.php: which contains front-end code to call an action to generate and download PDF.
- download-pdf.php: which actually contains the HTML that we are going convert to PDF.
- style.css: contains styles for the HTML file.
index.php
<!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"/>
<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>
<div class="container">
<div class="py-4">
<a href="download-pdf.php" type="button" class="btn btn-green">Download PDF</a>
</div>
</div>
</body>
</html>
download-pdf.php
<?phpThis file is converting HTML to PDF in following steps:
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="<?=BASE_URL?>/convert-html-to-pdf-in-php-using-dompdf/css/style.css" rel="stylesheet" />
</head>
<body>
<main class="main">
<div class="head">
<div class="image">
<img src="<?=BASE_URL?>/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"></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">
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]);
- Create an HTML content with desired layout for PDF.
- Instantiate DomPDF object with HTML5 parser enabled and remote URLs enabled.
- Set the paper size for PDF to A4.
- Pass the created HTML to DomPDF object class for processing.
- Render the HTML as PDF.
- Initiate the download of PDF via output stream.
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;
}