Laravel 11 Add Chart to PDF Using html2canvas
Hello, laravel web developers! In this article, we'll see laravel 11 add chart to pdf using html2canvas. Here, we'll use echart.js for the bar chart and install the dompdf composer package to generate a PDF file in laravel. and we'll use the html2canvas jQuery plugin to create an image of a chart.
In this guide, we'll show you how to add dynamic Echart bar charts to PDF documents in a Laravel application.
By converting HTML content, including charts, into images using HTML to canvas, and then generating a PDF, you can easily include charts in your reports.
Laravel 11 Add Chart to PDF Using html2canvas
If you haven't already, start by setting up a Laravel project. You can create a new Laravel project by running the following command.
composer create-project --prefer-dist laravel/laravel laravel-11-echart-pdf
To generate PDFs, we'll use the dompdf package. Install it by running it.
composer require barryvdh/laravel-dompdf
Next, create a Blade view to display your Echart bar chart.
Create a new file named chart.blade.php in the resources/views directory
<!-- resources/views/chart.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar Chart</title>
</head>
<body>
<div id="barChart" style="width: 600px; height: 400px;"></div>
<!-- Echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
var chartDom = document.getElementById('barChart');
var myChart = echarts.init(chartDom);
var option = {
title: {
text: 'Bar Chart Example'
},
tooltip: {},
xAxis: {
data: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E']
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
To convert the Echart bar chart into an image, use the html2canvas library.
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script>
html2canvas(document.getElementById('barChart')).then(function(canvas) {
var imgData = canvas.toDataURL('image/png');
// You can now pass this imgData to your server for PDF generation
});
</script>
Now, let's generate a PDF that includes the chart image.
Route::get('/chart', function () {
return view('chart');
});
Route::post('/download-pdf', [App\Http\Controllers\ChartController::class, 'downloadPDF']);
In your ChartController, create the downloadPDF method.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use PDF;
class ChartController extends Controller
{
public function downloadPDF(Request $request)
{
$image = $request->input('image');
$pdf = PDF::loadView('pdf', ['image' => $image]);
return $pdf->download('chart.pdf');
}
}
Create a new Blade view named pdf.blade.php in resources/views:
<!-- resources/views/pdf.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF</title>
</head>
<body>
<img src="{{ $image }}" alt="Echart Bar Chart">
</body>
</html>
Finally, send the captured chart image to your Laravel server for PDF generation. Update the script in chart.blade.php to send the image data via an Ajax POST request.
html2canvas(document.getElementById('barChart')).then(function(canvas) {
var imgData = canvas.toDataURL('image/png');
$.ajax({
url: '/download-pdf',
type: 'POST',
data: {
image: imgData,
_token: $('meta[name="csrf-token"]').attr('content') // Include CSRF token if needed
},
success: function(response) {
window.location.href = response.url;
},
error: function(xhr, status, error) {
console.error('An error occurred:', error);
}
});
});
The PDF will be generated and downloaded automatically when the server receives the image data.
You might also like:
- Read Also: Laravel 11 Add or Remove Multiple Input Fields with jQuery
- Read Also: How to Create Dynamic Multi Line Chart in Laravel 11
- Read Also: How to Integrate Datatable with Highcharts
- Read Also: Laravel 9 Dynamic Line Chart Example
