Laravel 9 pdf invoice generate and download with barryvdh dompdf

Laravel 9 pdf invoice generate and download with barryvdh dompdf

Hi, in this tutorial we will learn how to generate laravel pdf, invoice pdf, with the help of a package laravel-dompdf develop by varryvdh. This package offers very simple steps to generate a pdf file and many more. Let's see the following steps for generating a pdf file in laravel application.



Step-1. Setup a project


In step one we will create a fresh laravel project using composer. Also you can use your existing project.

composer create-project laravel/laravel pdf-generate



Step-2. Install package


Now we have to install a package using the bellow command

composer require barryvdh/laravel-dompdf



Step-3. Route and Controller


Once the package has been successfully installed we will create a controller PdfController and two routes, one is for generate pdf and another one is for download pdf.


Create controller

php artisan make:controller PdfController


Create Routes



use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PdfController;

Route::get('/', function () {
    return view('welcome');




Step-4. Logic implements inside controller


generate_pdf() method will geerate a pdf file and download_pdf () method will download the pdf file while we enter the required url in browser.



namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Barryvdh\DomPDF\Facade\Pdf;

class PdfController extends Controller
    public function generate_pdf()
        $data = '';
        $pdf = Pdf::loadView('billing_invoice',compact('data'));
        return $pdf->stream('billing-invoice');

    public function download_pdf()
        $data = '';
        $pdf = Pdf::loadView('billing_invoice',compact('data'));
        return $pdf->download('billing-invoice.pdf');



Step-5. Create blade file


Now we will create a blade file billing_invoice.blade.php inside resources\views for desining our pdf invoice and paste the bellow code



<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Billing Invoice - Webjourney</title>
    <link href=",wght@0,300;0,400;0,500;0,700;0,900;1,300&display=swap" rel="stylesheet">

<!-- Invoice area Starts -->
<div class="invoice-area">
    <div class="invoice-wrapper">
        <div class="invoice-header">
            <h1 class="invoice-title" style="text-align:center;">Invoice Heder - WebJourney</h1>
        <div class="invoice-details">
            <div class="invoice-details-flex">
                <div class="invoice-single-details">
                    <h2 class="invoice-details-title">Bill To:</h2>
                    <ul class="details-list">
                        <li class="list">Nazmul Hoque</li>
                        <li class="list"> <a href="#"> </a> </li>
                        <li class="list"> <a href="#"> 0167846483</a> </li>
                <div class="invoice-single-details">
                    <h4 class="invoice-details-title">Ship To:</h4>
                    <ul class="details-list">
                        <li class="list"> <strong>City: </strong> Dhaka</li>
                        <li class="list"> <strong>Area: </strong>Dhanmondi</li>
                        <li class="list"> <strong>Address: </strong>West Panthapath, Dhanmondi</li>

        <div class="item-description">
            <h5 class="table-title">Include Services</h5>
            <table class="custom--table">
                    <th>Unit Price</th>
                    <td>House Cleaning</td>
                    <td>Car Cleaning</td>
                <tr class="table_footer_row">
                    <td colspan="3"><strong>Package Fee</strong></td>

        <div class="item-description">
            <div class="table-responsive">
                <h5 class="table-title">Orders Details</h5>
                <table class="custom--table">
                    <thead class="head-bg">
                        <th>Buyer Details</th>
                        <th>Date & Schedule</th>
                        <th>Amount Details</th>
                            <span class="data-span">Name:</span>Nazmul Hoque<br>
                            <span class="data-span">Email:</span> <br>
                            <span class="data-span">Phone: </span>01678985958 <br>
                            <span class="data-span">Address:</span>West Panthapath, Dhanmondi
                            30-9-2022 <br>
                            Fri, 10pm
                            <span class="data-span"> Package Fee:</span>$70 <br>
                            <span class="data-span"> Sub Total:</span>$70 <br>
                            <span class="data-span"> Tax: </span>$10 <br>
                            <span class="data-span"> Total:</span>$80 <br>
                            <span class="data-span">Payment Status: </span>Pending

            <h3 style="text-align: center">
                Copyright @2023


<!-- Invoice area end -->





Put the bellow css inside the head section between <style></style> tag of the above html markup. This css code must use as an internal css otherwise design will break.

    * {font-family: 'Roboto', sans-serif;line-height: 26px;font-size: 15px}
    .custom--table {width: 100%;color: inherit;vertical-align: top;font-weight: 400;border-collapse: collapse;border-bottom: 2px solid #ddd;margin-top: 0;}
    .table-title{font-size: 18px;font-weight: 600;line-height: 32px;margin-bottom: 10px}
    .custom--table thead {font-weight: 700;background: inherit;color: inherit;font-size: 16px;font-weight: 500}
    .custom--table tbody {border-top: 0;overflow: hidden;border-radius: 10px;}
    .custom--table thead tr {border-top: 2px solid #ddd;border-bottom: 2px solid #ddd;text-align: left}
    .custom--table thead tr th {border-top: 2px solid #ddd;border-bottom: 2px solid #ddd;text-align: left;font-size: 16px;padding: 10px 0}
    .custom--table tbody tr {vertical-align: top;}
    .custom--table tbody tr td {font-size: 14px;line-height: 18px vertical-align:top 10}
    .custom--table tbody tr td:last-child{padding-bottom: 10px;}
    .custom--table tbody tr td .data-span {font-size: 14px;font-weight: 500;line-height: 18px;}
    .custom--table tbody .table_footer_row {border-top: 2px solid #ddd;margin-bottom: 10px !important;padding-bottom: 10px !important}
    /* invoice area */
    .invoice-area {padding: 10px 0}
    .invoice-wrapper {max-width: 650px;margin: 0 auto;box-shadow: 0 0 10px #f3f3f3;padding: 0px;}
    .invoice-header {margin-bottom: 40px;}
    .invoice-flex-contents {display: flex;align-items: center;justify-content: space-between;gap: 24px;flex-wrap: wrap;}
    .invoice-title {font-size: 25px;font-weight: 700}
    .invoice-details {margin-top: 20px}
    .invoice-details-flex {display: flex;align-items: flex-start;justify-content: space-between;gap: 24px;flex-wrap: wrap;}
    .invoice-details-title {font-size: 18px;font-weight: 700;line-height: 32px;color: #333;margin: 0;padding: 0}
    .invoice-single-details {padding:10px}
    .details-list {margin: 0;padding: 0;list-style: none;margin-top: 10px;}
    .details-list .list {font-size: 14px;font-weight: 400;line-height: 18px;color: #666;margin: 0;padding: 0;transition: all .3s;}
    .details-list .list strong {font-size: 14px;font-weight: 500;line-height: 18px;color: #666;margin: 0;padding: 0;transition: all .3s}
    .details-list .list a {display: inline-block;color: #666;transition: all .3s;text-decoration: none;margin: 0;line-height: 18px}
    .item-description {margin-top: 10px;padding:10px;}
    .products-item {text-align: left}
    .invoice-total-count .list-single {display: flex;align-items: center;gap: 30px;font-size: 16px;line-height: 28px}
    .invoice-subtotal {border-bottom: 2px solid #ddd;padding-bottom: 15px}
    .invoice-total {padding-top: 10px}
    .invoice-flex-footer {display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;gap: 30px;}
    .single-footer-item {flex: 1}
    .single-footer {display: flex;align-items: center;gap: 10px}
    .single-footer .icon {display: flex;align-items: center;justify-content: center;height: 30px;width: 30px;font-size: 16px;background-color: #000e8f;color: #fff}



Step-6. Fonts and Image


Now we will create a fonts directory inside storage directory. You must create this otherwise error will come.



After that keep an image inside public\img directory to display as a invoice logo



Step-7. Test app


Go to your project and run development server using the bellow artisan command.

php artisan serve


Now hit the bellow url to test if pdf is generated or not


and for pdf invoice download







If you like what you are reading, please think about buying us a coffee as a token of appreciation.

Buy Me A Coffee

We appreciate your support and are committed to providing you useful and informative content.

We are thankful for your ongoing support 


  • Share This:

Comments - 1

md nadim Imran

Nice Tutorial. Thanks

Aug 2, 2023