I am currently making PDF reports using Dompdf in Laravel, I made my graphs using Google Charts and I want to show them in the PDF report. My graph:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Clase', 'Ciudadanos pertenecientes'],
<?php echo $chartData; ?>
]);
var options = {
title: 'Ciudadanos ordenados por clase',
is3D: true,
};
var chart_div = document.getElementById('piechart_3d');
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});
chart.draw(data, options);
document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '" target="_blank">Printable version</a>';
}
</script>
</head>
<body style="background-color: black">
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
<div id='png'> </div>
</body>
</html>
As you can see, I'm aware that DomPDF does not support writing JS, so I tried converting the image to PNG using the google charts documentation
I get a URL like this one:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAA...............
But I have no idea how to render the chart image to my PDF view, I have tried several things like Quickchart and none of them have worked for me so far, does anyone have any ideas? Thanks and sorry for bothering
In your Laravel controller or wherever you are generating the PDF, make sure to pass the image URL to the view. You can do this through the controller or a view composer.
public function generatePdf()
{
// Your existing code to generate $chartData...
// Generate the Google Chart URL
$googleChartImageUrl = 'data:image/png;base64,...'; // Replace ... with the actual base64 encoded image data
// Pass the data to the view
return view('pdf.report', compact('chartData', 'googleChartImageUrl'));
}
Use the Image in the PDF View: In your Blade view (pdf/report.blade.php or similar), you can now use the passed image URL.
<!DOCTYPE html>
<html>
<head>
<!-- Your existing head section with other styles and scripts -->
</head>
<body>
<!-- Your other content -->
<!-- Display the chart image in the PDF -->
<img src="{{ $googleChartImageUrl }}" alt="Google Chart Image">
<!-- Your other content -->
</body>
</html>
After updating your view to include the chart image, you can then use DomPDF to generate the PDF as usual.
public function generatePdf()
{
// Your existing code to generate $chartData...
// Generate the Google Chart URL
$googleChartImageUrl = 'data:image/png;base64,...'; // Replace ... with the actual base64 encoded image data
// Pass the data to the view
$pdf = PDF::loadView('pdf.report', compact('chartData', 'googleChartImageUrl'));
// Optionally, you can save or output the PDF as needed
return $pdf->download('report.pdf');
}
the image URL is embedded directly in the HTML content of the PDF, and you don't need to rely on JavaScript. Ensure that the image URL is correctly passed to the view, and the image should be displayed in the generated PDF.