Step 1: index.php — Generate PDF with mPDF
Create a file called index.php And add the following code:
<?php
// Import mPDF
require_once './vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf();
// Bookmark the PDF
$mpdf->Bookmark('Start of the document');
// HTML content for the report
$html = '
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MPDF</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<!-- Header -->
<div class="row">
<div class="header">
<div class="logo_description_report_header">
<img src="./images/logo.png" alt="Logo">
<div class="brand_company">For testing report MPDF</div>
<div class="description"><small>Testing purpose</small></div>
</div>
</div>
</div>
<!-- Body -->
<div class="row">
<div class="body_report">
<div class="name_header">
<p>Name : Testing name</p>
<p>Age : 12</p>
<p>Date of Birth : 10/11/1999</p>
<p>Test Date : 10/11/1999</p>
<p>School : RUPP</p>
<p>Grade : Y1</p>
</div>
<div class="Header_title"><strong>Header of this</strong></div>
<div class="container_details">
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Date of Birth</td>
<td>Test Date</td>
<td>School</td>
<td>Grade</td>
</tr>
</thead>
<tbody>
<tr><td>testing1</td><td>10</td><td>10/11/1999</td><td>10/11/1999</td><td>RUPP</td><td>Year1</td></tr>
<tr><td>testing2</td><td>11</td><td>11/11/1998</td><td>11/11/1998</td><td>RUPP</td><td>Year2</td></tr>
<tr><td>testing3</td><td>12</td><td>12/11/1997</td><td>12/11/1997</td><td>RUPP</td><td>Year3</td></tr>
<tr><td>testing4</td><td>13</td><td>13/11/1996</td><td>13/11/1996</td><td>RUPP</td><td>Year4</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Footer -->
<div class="row">
<div class="address">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, animi!</div>
<div class="tel">012121212212</div>
</div>
</div>
</body>
</html>
';
$mpdf->WriteHTML($html);
$mpdf->Output(); // View in browser, or use Output('file.pdf', 'D') to force download
?>
Step 2: index.css — Styling the PDF
Create a index.css file in the same directory and add the following styles:
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
}
.container .row {
width: 100%;
}
.logo_description_report_header {
text-align: center;
line-height: 1.5rem;
}
.logo_description_report_header img {
width: 100px;
height: 100px;
}
.brand_company {
text-transform: capitalize;
background-color: rgba(255, 25, 0, 0.5);
padding: 0.5rem 0.8rem;
border-radius: 10px;
margin: 10px auto;
width: 50%;
}
.description {
color: gray;
font-size: 12px;
padding-bottom: 30px;
}
.body_report {
width: 90%;
margin: 0 auto;
}
.name_header p {
margin-bottom: 5px;
}
.Header_title {
padding: 20px 0;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.container_details table {
width: 100%;
border-collapse: collapse;
}
.container_details table thead tr {
background-color: red;
color: white;
}
.container_details table td {
padding: 8px 10px;
border: 1px solid #ccc;
}
.container_details table tbody tr:nth-child(odd) {
background-color: rgba(135, 255, 79, 0.3);
}
.container_details table tbody tr:nth-child(even) {
background-color: rgba(252, 255, 79, 0.3);
}
.row .address,
.row .tel {
font-size: 10px;
margin: 10px 0;
text-align: center;
}
Folder Structure
Make sure your folder looks like this:
/your-folder │ ├── index.php ├── index.css ├── /images │ └── logo.png ├── /vendor │ └── (composer dependencies including mpdf)
You need to install mPDF first:
composer require mpdf/mpdf
