Laravel 8 Generate PDF with Graph Tutorial

Laravel 8 Generate PDF with Graph Tutorial

Laravel 8 – generate pdf with graph example. In this tutorial, we will show you how to create pdf with graph in laravel 8 app.

Graph is defined as to create a diagram that shows a relationship between two or more things. An example of graph is to create a series of bars on graphing paper. The definition of a graph is a diagram showing the relationships between two or more things. An example of graph is a pie chart.

This tutorial will guide you to step by step from scrath to generate pdf with graph in laravel application.

How to Generate PDF with Graph in Laravel 8

  • Step 1 – Install wkhtmltopdf Software
  • Step 2 – Install Laravel 8 App
  • Step 3 – Install mikehaertl/phpwkhtmltopdf
  • Step 4 – Add Routes
  • Step 5 – Create Controller by Command
  • Step 6 – Create Blade View
  • Step 7 – Run Development Server
  • Step 8 – Test This App

Step 1 – Install wkhtmltopdf Software

First of all, Execute the following commmand to install wkhtmltopdf software on your web server. The following commands will install this software into your webservers:

For Ubuntu:

sudo apt install wkhtmltopdf

For Windows:

You have go the following link and download exe. Then install it:

https://wkhtmltopdf.org/

Step 2 – Install Laravel 8 App

In this step, Execute the following command to install laravel latest application setup, So open your terminal OR command prompt and run the following command:

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

Step 3 – Install mikehaertl/phpwkhtmltopdf

In this step, you need to install mikehaertl/phpwkhtmltopdf package. So again open your command prompt and run the following command:

composer require mikehaertl/phpwkhtmltopdf

Step 4 – Add Routes

In this step, open your web.php file and add the following routes into your file:

routes/web.php

use App\Http\Controllers\GraphPdfController;

Route::get('graph', [GraphPdfController::class, 'index']);
Route::get('download', [GraphPdfController::class, 'dwn'])->name('download');

The first route will show graph on web page and the second one is download the pdf file.

Step 5 – Create Controller by Command

In this step, execute the following command to create controller that name GraphPDFcontroller, so open your command prompt and execute the following command to create a controller by artisan:

php artisan make:controller GraphPdfController 

This command will create a controller that name GraphPdfController.php.

Next go to app/Http/Controllers and open GraphPdfController.php. Then update the following methods into your controller file:

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use mikehaertl\wkhtmlto\Pdf;
  
class GraphPdfController extends Controller
{
    /**
     * Write code on Construct
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('graph');
    }
  
    /**
     * Write code on Construct
     *
     * @return \Illuminate\Http\Response
     */
    public function dwn()
    {
        $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'));
    }
}

In this controller, you have update two methods. First index() method will load the web page and display the graph with data. And the downlaod() method will download the pdf file.

Step 6 – Create View File

Go to resources/views/ folder and create a new blade view file that name graph.blade.php file.

After that, update the following code into your graph.blade.php file:

<!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">Laravel 8 Generate PDF with Chart</h2>
  
<div id="chartDiv" class="pie-chart"></div>
  
<div class="text-center">
    <a href="{{ route('download') }}">Download PDF File</a>
    <h2>tutsmake.com.com</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>

Step 7 – Run Development Server

In this step, use the following php artisan serve command to start your server locally:

php artisan serve

Step 8 – Test This App

Open browser and hit the following url on it:

http://127.0.0.1:8000/graph

Conclusion

In this generate pdf with graph in laravel example, you have learned how to generate pdf file with graph and display data in web page.

Recommended Laravel Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *