How to Add Image to PDF file in Laravel 10

Websolutionstuff | Dec-20-2023 | Categories : Laravel PHP

Greetings, Laravel enthusiasts! Today, let's explore a practical aspect of web development – adding images to PDF files using Laravel 10. Whether you're creating invoices, reports, or any other document, this step-by-step guide will empower you to seamlessly integrate images into your PDFs.

Join me on this journey, and let's enhance our Laravel skills together.

In this article, we'll how to add an image to a pdf file in laravel 10. Also, we are using barryvdh/laravel-dompdf package to generate PDF files in laravel 8/9/10. You can add image on PDF in laravel 8, Laravel 9 and Laravel 10.

Step 1: Install and Set Up Laravel 10

Ensure you have Laravel 10 installed on your machine. If not, you can create a new project with:

composer create-project laravel/laravel mypdfproject
cd mypdfproject

 

Step 2: Install Required Packages

We'll need the barryvdh/laravel-dompdf package for handling PDFs. Install it using Composer:

composer require barryvdh/laravel-dompdf
 
Step 3: Configure Laravel-dompdf Package

Add the service provider and facade in your config/app.php:

'providers' => [
    // ...
    Barryvdh\DomPDF\ServiceProvider::class,
],

'aliases' => [
    // ...
    'PDF' => Barryvdh\DomPDF\Facade::class,
],

 

 

Step 4: Generate PDF Controller

Create a new controller for handling PDF generation:

php artisan make:controller PDFController

 

Step 5: Add Image to PDF Controller

In your PDFController.php file, use the following code to add an image to the PDF:

use PDF;
use Illuminate\Http\Request;

class PDFController extends Controller
{
    public function generatePDF()
    {
        $data = [
            'imagePath' => public_path('images/your_image.jpg'),
            'title' => "Add images to PDF files in Laravel 10 - Websolutionstuff"
            // Add other data as needed
        ];

        $pdf = PDF::loadView('pdf.document', $data);

        return $pdf->stream('document.pdf');
    }
}

 

Step 6: Create Blade View

Create a new Blade view file, document.blade.php, in the resources/views/pdf/ directory. Use the following code to embed the image in the PDF:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 9/10 Add Image To PDF File - Websolutionstuff</title>
</head>
<body>
    <h2>{{ $title }}</h2>
    <img src="{{ $imagePath }}" alt="Image">
    <br><br/>
    <strong>Public Folder:</strong>
    <img src="{{ public_path('laravel_10.jpg') }}" style="width: 100%;">
    <br/>
    <strong>Storage Folder:</strong>
    <img src="{{ storage_path('app/public/laravel.png') }}" style="width: 100%;">
</body>
</html>

 

Step 7: Define Route

In your web.php file, define a route to trigger the PDF generation:

use App\Http\Controllers\PDFController;

Route::get('/generate-pdf', [PDFController::class, 'generatePDF']);

 

Step 8: Test Your Application

Run your Laravel application:

php artisan serve
 
Conclusion:

And there you have it! You've successfully added images to your PDF files in Laravel 10. With the power of the barryvdh/laravel-dompdf package. Also, you can use it in Laravel 8 and Laravel 9.

 


You might also like:

Recommended Post
Featured Post
Change Text Color Based On Background Color Using Javascript
Change Text Color Based On Bac...

In this article, we will see a change text color based on background color using javascript. Sometimes we have requ...

Read More

Dec-25-2020

Laravel 9 Livewire CRUD Operation
Laravel 9 Livewire CRUD Operat...

In this article, we will see the laravel 9 livewire crud operation. we will learn about livewire crud operation in larav...

Read More

Nov-24-2022

Laravel 9 One To Many Relationship Example
Laravel 9 One To Many Relation...

In this article, we will see laravel 9 one to many relationship example. Also, you can use one to many relationships in...

Read More

Apr-02-2022

How To Setup 404 Page In Angular 12
How To Setup 404 Page In Angul...

In this article, we will see how to set up a 404 page in angular 12.  To set up a 404 page in the angular...

Read More

May-11-2022