How to Generate PDF with Chart in Laravel 11
Hello, laravel web developers! In this article, we'll see how to generate a PDF file with the chart in laravel 11. Here, we'll create a PDF file and add the chart to the PDF file in laravel 11. This post focuses on how to display graphs in PDFs using Laravel 11.
We'll explore how to integrate charts with Laravel PDF generation. If you're looking for an example of generating PDFs with graphs in Laravel, you're in the right place.
You can easily create PDF files with images and charts in Laravel 9, 10, and 11.
When working on large Laravel applications, you may need to generate PDF files that include charts. Whether you're using Google Charts, Chart.js, Highcharts, or other charting libraries with Laravel, this tutorial will guide you step by step on how to generate PDFs with embedded charts.
We'll use the wkhtmltopdf software to export charts to PDFs in Laravel. For large datasets, wkhtmltopdf is essential as it efficiently handles generating PDF files with images, charts, and large amounts of data.
We'll install wkhtmltopdf software in Ubuntu and Windows systems in this step.
For Ubuntu:
sudo apt install wkhtmltopdf
For Windows:
https://wkhtmltopdf.org/
Now, we'll install the laravel 11 application using the following command.
composer create-project --prefer-dist laravel/laravel laravel-11-example
Next, we'll install mikehaertl/phpwkhtmltopdf composer package using the following command.
composer require mikehaertl/phpwkhtmltopdf
Then, we'll define the routes in the web.php file.
routes/web.php
Route::get('preview', 'PDFController@preview');
Route::get('download', 'PDFController@download')->name('download');
Next, we'll create a controller add the preview, and download the function.
app/Http/Controllers/PDFController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use mikehaertl\wkhtmlto\Pdf;
class PDFController extends Controller
{
/**
* Write code on Construct
*
* @return \Illuminate\Http\Response
*/
public function preview()
{
return view('chart');
}
/**
* Write code on Construct
*
* @return \Illuminate\Http\Response
*/
public function download()
{
$render = view('chart')->render();
$pdf = new Pdf;
$pdf->addPage($render);
$pdf->setOptions(['javascript-delay' => 5000]);
$pdf->saveAs(public_path('report.pdf'));
return response()->download(public_path('report.pdf'));
}
}
Then, we'll create chart.blade.php file and add the following HTML code to that file.
resources/views/chart.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://www.google.com/jsapi"></script>
<style>
.pie-chart {
width: 600px;
height: 400px;
margin: 0 auto;
}
.text-center{
text-align: center;
}
</style>
</head>
<body>
<h2 class="text-center">How to Generate PDF with Chart in Laravel 11 - Techsolutionstuff</h2>
<div id="chartDiv" class="pie-chart"></div>
<div class="text-center">
<a href="{{ route('download') }}">Download PDF File</a>
<h2>How to Generate PDF with Chart in Laravel 11 - Techsolutionstuff</h2>
</div>
<script type="text/javascript">
window.onload = function() {
google.load("visualization", "1.1", {
packages: ["corechart"],
callback: 'drawChart'
});
};
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Pizza');
data.addColumn('number', 'Populartiy');
data.addRows([
['Laravel', 33],
['Codeigniter', 26],
['Symfony', 22],
['CakePHP', 10],
['Slim', 9]
]);
var options = {
title: 'Popularity of Types of Framework',
sliceVisibilityThreshold: .2
};
var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));
chart.draw(data, options);
}
</script>
</body>
</html>
Now, run the laravel 11 application using the following command.
php artisan serve
You might also like:
- Read Also: How to Integrate Datatable with Highcharts
- Read Also: Laravel 11 Add Chart to PDF Using html2canvas
- Read Also: Laravel 11 Generate PDF and Send Email Example
- Read Also: How To Download PDF File Using AJAX In Laravel 9
