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
routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PdfController;
Route::get('/', function () {
return view('welcome');
});
Route::get('/generate-pdf',[PdfController::class,'generate_pdf']);
Route::get('/download-pdf',[PdfController::class,'download_pdf']);
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.
app\Controllers\PdfController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Barryvdh\DomPDF\Facade\Pdf;
class PdfController extends Controller
{
public function generate_pdf()
{
$data = 'webjourney.dev';
$pdf = Pdf::loadView('billing_invoice',compact('data'));
return $pdf->stream('billing-invoice');
}
public function download_pdf()
{
$data = 'webjourney.dev';
$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
resources\views\billing_invoice.bladephp
<!DOCTYPE html>
<html>
<head>
<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="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300&display=swap" rel="stylesheet">
</head>
<body>
<!-- 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>
<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="#">nazmul@gmail.com </a> </li>
<li class="list"> <a href="#"> 0167846483</a> </li>
</ul>
</div>
<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>
</ul>
</div>
</div>
</div>
<div class="item-description">
<h5 class="table-title">Include Services</h5>
<table class="custom--table">
<thead>
<tr>
<th>Title</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>House Cleaning</td>
<td>$10</td>
<td>3</td>
<td>$30</td>
</tr>
<tr>
<td>Car Cleaning</td>
<td>$20</td>
<td>2</td>
<td>$40</td>
</tr>
<tr class="table_footer_row">
<td colspan="3"><strong>Package Fee</strong></td>
<td><strong>$70</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="item-description">
<div class="table-responsive">
<h5 class="table-title">Orders Details</h5>
<table class="custom--table">
<thead class="head-bg">
<tr>
<th>Buyer Details</th>
<th>Date & Schedule</th>
<th>Amount Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="data-span">Name:</span>Nazmul Hoque<br>
<span class="data-span">Email:</span>Nazmul@gmail.com <br>
<span class="data-span">Phone: </span>01678985958 <br>
<span class="data-span">Address:</span>West Panthapath, Dhanmondi
</td>
<td>
30-9-2022 <br>
Fri, 10pm
</td>
<td>
<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
</td>
</tr>
</tbody>
</table>
</div>
</div>
<footer>
<h3 style="text-align: center">
Copyright @2023
</h3>
</footer>
</div>
</div>
<!-- Invoice area end -->
</body>
</html>
CSS
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
http://127.0.0.1:8000/generate-pdf
and for pdf invoice download
http://127.0.0.1:8000/download-pdf
If you like what you are reading, please think about buying us a coffee as a token of appreciation.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support