Laravel and DomPDF: Step by step guide to generating PDF Documents with Images and CSS
Creating PDF documents is a common requirement in web applications, especially for generating invoices, receipts, certificates, tickets, and various reports. In this comprehensive tutorial, we'll delve into using Laravel and DomPDF to generate PDF documents with images and CSS. We'll cover configuration options, design considerations, output size, performance, and database queries. Additionally, we'll discuss tips and tricks for handling page breaks, loading images using base64, and more.
Prerequisites
Before we start, ensure you have the following installed:
- PHP >=8.2
- Composer 2+
- Laravel 10+
Introduction
DomPDF is a popular PHP library that allows you to generate PDF documents from HTML content. It supports CSS styling, images, and various configuration options. By integrating DomPDF with Laravel, you can easily create sophisticated PDF documents using Blade templates and Laravel's powerful features.
Other popular PDF libraries include TCPDF, FPDF, and Snappy.
However, DomPDF is widely used due to its ease of integration and robust feature set.
In this tutorial, we'll walk through the process of setting up a Laravel project, configuring DomPDF, creating a controller to handle PDF generation, designing a Blade template for the PDF content, adding routes, and optimizing performance. We'll also discuss advanced configuration options and provide tips and tricks for generating high-quality PDF documents.
Assumptions
This tutorial assumes you have a basic understanding of Laravel and PHP. If you're new to Laravel, consider going through the official Laravel documentation to familiarize yourself with the framework. Other wise you can follow the Laravel Bootcamp to get started with Laravel.
Step 1: Setting Up Laravel Project
First, create a new Laravel project if you don't already have one, or use an existing project, Of course, you can skip this step if you already have a Laravel project.
composer create-project --prefer-dist laravel/laravel pdf-tutorial
cd pdf-tutorial
Next, install DomPDF:
composer require barryvdh/laravel-dompdf
Publish the configuration file:
php artisan vendor:publish --provider="Barryvdh\DomPDF\ServiceProvider"
Step 2: Configuring DomPDF
Open the config/dompdf.php file. The configuration file contains various options for customizing the PDF output. Here you can set various options including the default paper size, orientation, font, and more.
- Paper size: You can set the default paper size.
'default_paper_size' => 'a4',
- Orientation: Set the default orientation (portrait or landscape).
'orientation' => 'portrait',
- Font: You can specify the default font and add custom fonts.
'default_font' => 'serif',
Step 3: Creating a Controller
Create a controller to handle PDF generation:
php artisan make:controller PDFController
In app/Http/Controllers/PDFController.php, add the following code:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use PDF;
class PDFController extends Controller
{
public function generatePDF()
{
$data = [
'title' => 'Laravel PDF Example',
'date' => date('m/d/Y'),
];
$pdf = PDF::loadView('myPDF', $data);
return $pdf->download('document.pdf');
}
}
Step 4: Creating a Blade Template
Create a Blade template for the PDF content:
touch resources/views/myPDF.blade.php
Add the following content to myPDF.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Laravel PDF Example</title>
<style>
body {
font-family: 'Arial, sans-serif';
}
.container {
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.content {
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>{{ $title }}</h1>
<p>Date: {{ $date }}</p>
</div>
<div class="content">
<p>This is an example of a PDF document generated using Laravel and DomPDF.</p>
</div>
</div>
</body>
</html>
Step 5: Adding Routes
Add routes to handle PDF generation in routes/web.php:
use App\Http\Controllers\PDFController;
Route::get('generate-pdf', [PDFController::class, 'generatePDF']);
Step 6: Adding Images
You can add images to the PDF by embedding them as base64-encoded strings or using URLs.
Images can be embedded directly in the Blade template using base64 encoding. For example, to embed an image from the public/images this is how you can do it:
<img src="data:image/png;base64,{{ base64_encode(file_get_contents(public_path('images/logo.png'))) }}" alt="Logo">
Or directly from a URL:
<img src="{{ asset('images/logo.png') }}" alt="Logo">
Step 7: Optimizing Performance
Database Queries
When dealing with large datasets (e.g., 1,000+ records), use pagination or chunking to manage memory usage:
$data = DB::table('users')->paginate(50);
$pdf = PDF::loadView('myPDF', ['data' => $data]);
Output Size
To reduce the output size, minimize the use of heavy images and opt for vector graphics when possible. Also, use efficient CSS.
Page Breaks
Ensure content is well-structured for page breaks. Use CSS to handle page breaks:
.page-break {
page-break-after: always;
}
And in your Blade template:
<div class="page-break"></div>
Step 8: Advanced Configuration
For more advanced configurations, refer to the DomPDF documentation. You can customize almost everything, from margins to the way fonts are loaded.
Using Custom Fonts
To use custom fonts, first, add them to your project and configure DomPDF to use them:
'custom_font_dir' => base_path('resources/fonts/'),
'custom_font_data' => [
'custom-font' => [
'R' => 'CustomFont-Regular.ttf',
'B' => 'CustomFont-Bold.ttf',
]
],
In your Blade template:
<style>
body {
font-family: 'custom-font', sans-serif;
}
</style>
Conclusion
By following this step-by-step guide, you can generate sophisticated PDF documents using Laravel and DomPDF, complete with images and CSS styling. This tutorial has covered essential configuration options, design considerations, performance optimization. You can expand this foundation to build a robust document generation system for your Laravel application.
Potential Series and Repository
This tutorial is part of a series on PDF generation with Laravel. A complete repository with various document templates (invoices, receipts, certificates, tickets, etc.) can be found here. Feel free to contribute and expand the collection.
Happy coding!
Top comments (3)
Nice, I'm looking for available options to handle a4 pages in html and I discovered it's not that easy. I'm building a resume template in html, and tying to split it in a4 pages on screens is challenging. I'm also looking for other options.
Nice article bro🚀🚀🚀
Nice guide for getting everything set up to go.
I'd suggest adding "use Barryvdh\DomePDF\Facade\Pdf" in place of "use PDF" in the controller to reduce a bit of confusion.