Skip to content

All topics  /  Laravel

Laravel 8 PDF File Download using JQuery Ajax Request Example

Laravel ·

Teams applying “Laravel 8 PDF File Download using JQuery Ajax Request Example” in a production project can use the official resource to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Hi Guys,

In this example,I will learn you how to dowload pdf file using jquery ajax in laravel 8.you can easy and simply download pdf file using jquery ajax in laravel 8.

In this example, we will install barryvdh/laravel-dompdf composer package and then after we will add new route with new controller file.

PDF is one of basic requirement when you are working with erp level project or ecommerce website. we may need to create pdf file for report or invoice etc. So, here i will give you very simple example for create and download file in laravel 8.

Step 1 : Install Laravel 8


In the first step, we need to get fresh laravel 8 version application So let's open terminal and run bellow command to install fresh laravel project. 

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Install dompdf package

We need dompdf package for html design to generate pdf So let's open terminal run bellow command to install dompdf package: 

composer require barryvdh/laravel-dompdf

After successfully install package, open config/app.php file and add service provider and alias.

config/app.php 

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

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

Step 3 : Add Route

In this step, We have to create two route for one route is preview pdf and second route to generate pdf and download pdf file. So let's open web.php file put bellow route:

routes/web.php 

use App\Http\Controllers\PdfController;
Route::get('pdf/preview', [PdfController::class, 'index']);
Route::get('pdf/generate', [PdfController::class, 'create']);

Step 4 : Create Controller

Here you can create new controller as PdfController and add two method in this controller, first method is preview and last one is generate pdf and download pdf. So let's open terminal and put bellow command to create controller file. 

php artisan make:controller PdfController

Now we can add two methods in PdfController file So let's open PdfController.php file put bellow code.we will store pdf file in public folder.

app/Http/Controllers/PdfController.php 

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use PDF;
class PdfController extends Controller
{
    public function index()
    {
        return view('pdf.index');
    }
    public function create()
    {
        $pdf = PDF::loadView('pdf.pdf');
        $path = public_path('pdf/');
        $fileName =  time().'.'. 'pdf' ;
        $pdf->save($path . '/' . $fileName);
        $pdf = public_path('pdf/'.$fileName);
        return response()->download($pdf);
    }
}

Step 5 : Create blade file

In last step. In this step we have to create preview blade file. So mainly we have to create preview file. So finally you have to create one preview blade file for preview pdf design:

resources/views/pdf/index.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 PDF File Download using JQuery Ajax Request Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    @include('pdf.pdf')
    <div class="text-center pdf-btn">
        <button type="button" class="btn btn-info download-pdf">Download Pdf</button>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(".download-pdf").click(function(){
        var data = '';
        $.ajax({
            type: 'GET',
            url: '/pdf/generate',
            data: data,
            xhrFields: {
                responseType: 'blob'
            },
            success: function(response){
                var blob = new Blob([response]);
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = "Sample.pdf";
                link.click();
            },
            error: function(blob){
                console.log(blob);
            }
        });
    });
</script>
</html>

resources/views/pdf/pdf.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 PDF File Download using JQuery Ajax Request Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style type="text/css">
    h2{
        text-align: center;
        font-size:22px;
        margin-bottom:50px;
    }
    body{
        background:#f2f2f2;
    }
    .section{
        margin-top:30px;
        padding:50px;
        background:#fff;
    }
    .pdf-btn{
        margin-top:30px;
    }
</style>  
<body>
	<div class="container">
        <div class="col-md-8 section offset-md-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h2>Laravel 8 PDF File Download using JQuery Ajax Request Example - NiceSnippets.com</h2>
                </div>
                <div class="panel-body">
                    <div class="main-div">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        <br>
                        <br>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Now so run bellow command for quick run: 

php artisan serve

Now you can open bellow URL on your browser: 

localhost:8000/pdf/preview

It will help you...

Preview Design:

Preview PDF:

More on this topic