How To Generate Digital Invoice PDF In Laravel Demo

  • 03-10-2022
  • 1881
  • Laravel 9
  • Haresh Chauhan

Simple Digital Invoice Generates In Laravel Demo Example, we will generate a dynamic invoice in pdf. Therefore we need to install a pdf library file. To generate an invoice in a pdf file we will install dompdf in our application.

How to generate a digital invoice with a pdf file in the laravel application. We will generate an invoice from the HTML. For that, we need to create a blade file. also, we will do some script in route file for the generate dynamic invoice.

The digital invoice is more important while you are running your business online. So the customer gets satisfied with the there paid amount and paid billing. So just follow four-step and generate a digital invoice in your laravel application.

Preview:

image

Step 1. Create Project

Firstly, we will create a new fresh laravel project using the below-suggested command. This command will create the latest version of the laravel application with the composer, So you don't need to install composer after the hit the given command.

Once the project is created, go to the project directory. in your application terminal.

composer create-project laravel/laravel invoice

cd invoice

Sometimes you may need to generate an app key in your .env file if cash is not generated, use the below command and generate an app key for your new clone laravel application.

php artisan key:generate

Step 2. PDF Composer Install

We need to take the help of PDF generator composer, Install dompdf composer using the below-provided command in your application.

composer require barryvdh/laravel-dompdf

Generate the configuration file for the dompdf using provided command, the pdf file will generate in the config folder. This will provide the default basic configuration for the use of dompdf in our application.

php artisan vendor:publish --provider="Barryvdh\DomPDF\ServiceProvider"

Step 3. Invoice Blade File

This is our invoice HTML design. We will create an invoice.blade.php file inside the resources/views/invoice.blade.php

In This blade view file, we will set dynamic invoice data and print it out in the pdf.

resources/view/invoice.blade.php 
<html>
<head>
     <meta charset="utf-8">
     <title>Invoice</title>
     <link rel="stylesheet" href="style.css">
</head>
<style>
     * {
          border: 0;
          box-sizing: content-box;
          color: inherit;
          font-family: inherit;
          font-size: inherit;
          font-style: inherit;
          font-weight: inherit;
          line-height: inherit;
          list-style: none;
          margin: 0;
          padding: 0;
          text-decoration: none;
          vertical-align: top;
          font-family: DejaVu Sans, sans-serif;
     }
     /* content editable */

     *] {
          border-radius: 0.25em;
          min-width: 1em;
          outline: 0;
     }

     *] {
          cursor: pointer;
     }

     body{
          padding: 50px !important
     }

     *]:hover,
     *]:focus,
     td:hover *],
     td:focus *],
     img.hover {
          background: #DEF;
          box-shadow: 0 0 1em 0.5em #DEF;
     }

     span] {
          display: inline-block;
     }

     /* heading */

     h1 {
          font: bold 100% sans-serif;
          letter-spacing: 0.5em;
          text-align: center;
          text-transform: uppercase;
     }

     /* table */

     table {
          font-size: 75%;
          table-layout: fixed;
          width: 100%;
     }

     table {
          border-collapse: separate;
          border-spacing: 2px;
     }

     th,
     td {
          border-width: 1px;
          padding: 0.5em;
          position: relative;
          text-align: left;
     }

     th,
     td {
          border-radius: 0.25em;
          border-style: solid;
     }

     th {
          background: #EEE;
          border-color: #BBB;
     }

     td {
          border-color: #DDD;
     }

     /* header */

     header {
          margin: 0 0 3em;
     }

     header:after {
          clear: both;
          content: "";
          display: table;
     }

     header h1 {
          background: #000;
          border-radius: 0.25em;
          color: #FFF;
          margin: 0 0 1em;
          padding: 0.5em 0;
     }

     header address {
          float: left;
          font-size: 75%;
          font-style: normal;
          line-height: 1.25;
          margin: 0 1em 1em 0;
     }

     header address p {
          margin: 0 0 0.25em;
     }

     header span,
     header img {
          display: block;
          float: right;
     }

     header span {
          margin: 0 0 1em 1em;
          max-height: 25%;
          max-width: 60%;
          position: relative;
     }

     header img {
          max-height: 100%;
          max-width: 100%;
     }

     header input {
          cursor: pointer;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          height: 100%;
          left: 0;
          opacity: 0;
          position: absolute;
          top: 0;
          width: 100%;
     }

     /* article */

     article,
     article address,
     table.meta,
     table.inventory {
          margin: 0 0 3em;
     }

     article:after {
          clear: both;
          content: "";
          display: table;
     }

     article h1 {
          clip: rect(0 0 0 0);
          position: absolute;
     }

     article address {
          float: left;
          font-size: 125%;
          font-weight: bold;
     }

     /* table meta & balance */

     table.meta,
     table.balance {
          float: right;
          width: 36%;
     }

     table.meta:after,
     table.balance:after {
          clear: both;
          content: "";
          display: table;
     }

     /* table meta */

     table.meta th {
          width: 40%;
     }

     table.meta td {
          width: 60%;
     }

     /* table items */

     table.inventory {
          clear: both;
          width: 100%;
     }

     table.inventory th {
          font-weight: bold;
          text-align: center;
     }

     table.inventory td:nth-child(1) {
          width: 26%;
     }

     table.inventory td:nth-child(2) {
          width: 38%;
     }

     table.inventory td:nth-child(3) {
          text-align: right;
          width: 12%;
     }

     table.inventory td:nth-child(4) {
          text-align: right;
          width: 12%;
     }

     table.inventory td:nth-child(5) {
          text-align: right;
          width: 12%;
     }

     /* table balance */

     table.balance th,
     table.balance td {
          width: 50%;
     }

     table.balance td {
          text-align: right;
     }

     /* aside */

     aside h1 {
          border: none;
          border-width: 0 0 1px;
          margin: 0 0 1em;
     }

     aside h1 {
          border-color: #999;
     }

     /* javascript */

     .add {
          border-width: 1px;
          display: block;
          font-size: .8rem;
          padding: 0.25em 0.5em;
          float: left;
          text-align: center;
          width: 0.6em;
     }

     .add {
          background: #9AF;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          background-image: -moz-linear-gradient(#00ADEE 5%, #0078A5 100%);
          background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
          border-radius: 0.5em;
          border-color: #0076A3;
          color: #FFF;
          cursor: pointer;
          font-weight: bold;
          text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.333);
     }

     .add {
          margin: -2.5em 0 0;
     }

     .add:hover {
          background: #00ADEE;
     }

     @media print {
          * {
               -webkit-print-color-adjust: exact;
          }

          html {
               background: none;
               padding: 0;
          }

          body {
               box-shadow: none;
               margin: 0;
          }

          span:empty {
               display: none;
          }

          .add {
               display: none;
          }
     }

     page[size="A4"] {  
          width: 21cm;
          height: 29.7cm; 
     }

     @media print {
          html, body {
               width: 210mm;
               height: 297mm;
          }
          .page {
               margin: 0;
               border: initial;
               border-radius: initial;
               width: initial;
               min-height: initial;
               box-shadow: initial;
               background: initial;
               page-break-after: always;
          }
     }
</style>
<body class="page">
     <page size="A4">
          <header>
               <h1>Invoice</h1>
               <address>
                    <p>{{$data['name']}}</p>
                    <p>{{$data['mobile']}}</p>
                    <p>{{$data['app_name']}}</p>
                    <p>{{$data['address']}}</p>
               </address>
          </header>
          <article>
               <h1>Recipient</h1>
               <table class="meta">
                    <tr>
                    <th><span>Invoice #</span></th>
                    <td><span>{{$data['order_id']}}</span></td>
                    </tr>
                    <tr>
                    <th><span>Date</span></th>
                    <td><span>{{now()->format('d-m-Y h:i A')}}</span></td>
                    </tr>
                    <tr>
                    <th><span>Amount Paid</span></th>
                    <td><span id="prefix">₹</span><span>{{$data['transaction_amount']}}</span></td>
                    </tr>
               </table>
               <table class="inventory">
                    <thead>
                    <tr>
                         <th><span>Item</span></th>
                         <th><span>Unit</span></th>
                         <th><span>Unit Rate</span></th>
                         <th><span>Quantity</span></th>
                         <th><span>Price</span></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($data['item'] as $item)
                         <tr>
                              <td style="text-align: center"><span>{{$item['name']}}</span></td>
                              <td style="text-align: center"><span>{{$item['total_item']}}</span></td>
                              <td style="text-align: center"><span data-prefix>₹</span><span>{{$item['price']}}</span></td>
                              <td style="text-align: center"><span>{{$item['selected_item']}}</span></td>
                              <td style="text-align: center"><span data-prefix>₹</span><span>{{($item['total'])}}</span></td>
                         </tr>
                    @endforeach
                    </tbody>
               </table>
               <table class="balance">
                    <tr>
                    <th><span>Sub Total</span></th>
                    <td style="text-align: left"><span data-prefix>₹</span><span>{{$data['total_amount']}}</span></td>
                    </tr>
                    <tr>
                    <th><span>Discount</span></th>
                    <td style="text-align: left"><span data-prefix>₹</span><span>{{$data['offer_amount']}}</span></td>
                    </tr>
                    <tr>
                    <th><span>Tax</span></th>
                    <td style="text-align: left"><span data-prefix>₹</span><span>{{$data['tax']}}</span></td>
                    </tr>
                    <tr>
                    <th><span>Total Amount</span></th>
                    <td style="text-align: left"><span data-prefix>₹</span><span>{{$data['transaction_amount']}}</span></td>
                    </tr>
               </table>
          </article>
          <aside>
               <h1 style="font-size: 28px">Thank You</h1>
          </aside>
     </page>
</body>
</html>

Step 4. Route & Create Invoice

Created a route file the generate an invoice pdf. I have to take a $details variable to set data in the invoice. This invoice data first we will share to the view file. Then after we will receive that shared data into the view file and we will print it inside the invoice.

After the print of that shared data in the invoice, we will render the invoice blade file and put the HTML content inside the pdf. The pdf will load from the HTML content and generate in the public path folder in our application.

routes/web.php 
<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/create-invoice', function () {

     $details = [
          'name' => 'Haresh Chauhan',
          'mobile' => '+91 1234567890',
          'app_name' => 'Webappfix',
          'address' => 'Surajkund" Gat No 64/3 Mumbai_nashik Highway (NH-3), Rajurbahula',
          'order_id' => '123456',
          'item' => [
               [
                    'name' => 'Item 1',
                    'total_item' => 5,
                    'price' => 10,
                    'selected_item' => 99,
                    'total' => (10 * 99)
               ]
          ],
          'total_amount' => 990,
          'offer_amount' => 100,
          'tax' => 90,
          'transaction_amount' => 800,
     ];

     view()->share('data',$details);

     $html = view('invoice')->render();

     $pdf = App::make('dompdf.wrapper');

     $pdf->loadHTML($html);

     if(! \File::exists(storage_path('invoice/'))) {

          \File::makeDirectory(storage_path('invoice/'),0777);
     }

     $invoice = time().'.pdf';

     $pdf->save(public_path('/').$invoice);

     dd('ok');
});

Step 5. Start Server

Start development server using the command :

php artisan serve

Run the URL in your browser and generate an invoice pdf file.

http://127.0.0.1:8000/create-invoice

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :