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.
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
Now, we will install barryvdh/laravel-dompdf package using the composer command. So, run the following command.
composer require barryvdh/laravel-dompdfAfter 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,
]
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']);
Now, we will create a PDFController using the following command.
php artisan make:controller PDFControllerapp/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);
}
}
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>
Now, we will run laravel 9 download pdf file using jquery ajax using the following command.
php artisan serveOutput:
You might also like:
- Read Also: How To Convert HTML To PDF In Python
- Read Also: How To Convert HTML To PDF Using JavaScript
- Read Also: How To Generate PDF File In Node JS Using PDFKit
- Read Also: How To Convert HTML To PDF In Node JS Using Puppeteer
