How To Download PDF File Using AJAX In Laravel 9

In this article, we will see how to download pdf file using ajax in laravel 9 and laravel 10. Here, we will learn about downloading pdf file using jquery ajax in laravel 7, laravel 8, laravel 9 and laravel 10. So, you can download pdf file without page refresh in laravel 8/9/10.

Also, we will use barryvdh/laravel-dompdf package to generate pdf files in laravel.

So, let's see generate pdf using jQuery Ajax in laravel, download PDF files in laravel 8 and Laravel 9 download pdf file using Ajax jQuery, and download pdf files without page refresh in laravel 8 and laravel 9/10.

Step 1: Install Laravel 9

In this step, we will install the laravel 9 application using the following command.

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

 

 

Step 2: Install Dompdf Package

Now, we will install barryvdh/laravel-dompdf package using the composer command. So, run the following command.

composer require barryvdh/laravel-dompdf

After that, we will add the service provider and alias to the app.php config file.

config/app.php

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

 

Step 3: Add Route

In this step, we will add a route to the web.php file.

routes/web.php

<?php

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

/*
|--------------------------------------------------------------------------
| 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('/', function () {
    return view('welcome');
});


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

 

Step 4: Create Controller

Now, we will create a PDFController using the following command.

php artisan make:controller PDFController

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('index');
    }

    public function generatePDF()
    {
        $pdf = PDF::loadView('generate_pdf');

        $fileName =  time().'.'. 'pdf' ;
        $pdf->save(public_path() . '/' . $fileName);

        $pdf = public_path($fileName);
        return response()->download($pdf);
    }
}

 

 

Step 5: Create Blade File

Now, we will create an index.blade.php file and load the pdf file and download the pdf file using ajax.

resources/views/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Download PDF File Using AJAX In Laravel 9 - Techsolutionstuff</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:#fff;
        }
        .section{                       
            background:#fff;
        }
        .pdf-btn{
            margin-top:30px;
        }
    </style> 
<body>
    @include('generate_pdf')
    <div class="text-center pdf-btn">
        <button type="button" class="btn btn-dark 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: "{{route('generate.pdf')}}",
            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 = "techsolutionstuff.pdf";
                link.click();
            },
            error: function(blob){
                console.log(blob);
            }
        });
    });

</script>
</html>

resources/views/generate_pdf.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>How To Download PDF File Using AJAX In Laravel 9 - Techsolutionstuff</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:#fff;
        }
        .section{
            margin-top:30px;            
            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>How To Download PDF File Using AJAX In Laravel 9 - Techsolutionstuff</h2>
                    </div>
                    <div class="panel-body">
                        <div class="main-div">
                            <h3>What is Lorem Ipsum?</h3>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br>
                            <h3>Where does it come from?</h3>
                            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.                               
                        </div>
                    </div>
                </div>
            </div>
        </div>    
    </body>
</html>

 

Step 6: Run Laravel 9 Application

Now, we will run laravel 9 download pdf file using jquery ajax using the following command.

php artisan serve

Output:

how_to_download_pdf_file_using_ajax_in_laravel

 


You might also like:

RECOMMENDED POSTS

FEATURE POSTS