Generate PDF with Graph Using Snappy in Laravel

Hi Guys,

In this blog, I will show you how to generate pdf with graph in laravel using snappy.laravel Snappy is better than other packages. Because its support javascript. We need to install wkhtmltopdf and wkhtmltoimage before installing laravel snappy package.

Laravel Snappy is a library that uses Wkhtmltopdf to convert HTML to PDF. generate pdf with graph in laravel using snappy package.

Here I will give you full example for laravel generate pdf with graph using snappy.So let's follow bellow step by step.

Step 1 : Install wkhtmltopdf and wkhtmltoimage

In this step You can install wkhtmltopdf convert html to pdf. So Let's install them.

For x64 System

composer require h4cc/wkhtmltopdf-amd64 0.12.x
composer require h4cc/wkhtmltoimage-amd64 0.12.x

For x86 System

composer require h4cc/wkhtmltopdf-i386 0.12.x
composer require h4cc/wkhtmltoimage-i386 0.12.x

For Windows

composer require wemersonjanuario/wkhtmltopdf-windows "0.12.2.3"

Step 2 : Install Laravel App

In this step, You can install laravel fresh app. So open terminal and put the bellow command.

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

Step 3 : Install Laravel Snappy

In this step, You can install snappy package. So open terminal and put the bellow command.

composer require barryvdh/laravel-snappy

Run succefully above command then after open config/app.php and put the bellow code.

config/app.php

'providers' => [
        Barryvdh\Snappy\ServiceProvider::class,
    ],

'aliases' => [
        'PDF' => Barryvdh\Snappy\Facades\SnappyPdf::class,
        'SnappyImage' => Barryvdh\Snappy\Facades\SnappyImage::class,
    ]

Now publish snappy config file using bellow command so lets open terminal and run bellow command:

php artisan vendor:publish --provider="Barryvdh\Snappy\ServiceProvider"

Run Successfully above command thenafter open snappy config file add configuration.

For Windows

The pdf and image’s binary will load from wemersonjanuario\wkhtmltopdf-windows package. change in snappy file.

config/snappy.php

return [
    'pdf' => array(
        'enabled' => true,
        'binary' => base_path('vendor\wemersonjanuario\wkhtmltopdf-windows\bin\64bit\wkhtmltopdf'),
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    ),
    'image' => array(
        'enabled' => true,
        'binary' => 'vendor\wemersonjanuario\wkhtmltopdf-windows\bin\64bit\wkhtmltoimage',
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    ),
];

For Other System

The pdf and image’s binary will load from wemersonjanuario\wkhtmltopdf-windows package. change in snappy file.

config/snappy.php

return [
    'pdf' => array(
        'enabled' => true,
        'binary' => base_path('vendor\wemersonjanuario\wkhtmltopdf-windows\bin\64bit\wkhtmltopdf'),
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    ),
    'image' => array(
        'enabled' => true,
        'binary' => 'vendor\wemersonjanuario\wkhtmltopdf-windows\bin\64bit\wkhtmltoimage',
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    ),
];

If error 126 Occurs: If you see the error 126 (not for Windows users), then you can fix the error in this way:

You need to copy the wkhtmltopdf-amd64 and wkhtmltopdf-amd64 files to user local bin folder of your system. Let’s do this:

cp vendor/h4cc/wkhtmltoimage-amd64/bin/wkhtmltoimage-amd64 /usr/local/bin/
cp vendor/h4cc/wkhtmltopdf-amd64/bin/wkhtmltopdf-amd64 /usr/local/bin/

Now give the permission for this folder. Run bellow command:

chmod +x /usr/local/bin/wkhtmltoimage-amd64
chmod +x /usr/local/bin/wkhtmltopdf-amd64

Now change the binary path of the config snappy file put the bellow code:

return [
    'pdf' => array(
        'enabled' => true,
        'binary' => base_path('/usr/local/bin/wkhtmltopdf-amd64'),
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    ),
    'image' => array(
        'enabled' => true,
        'binary' => '/usr/local/bin/wkhtmltoimage-amd64',
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    ),
];

Step 5 : Add Route

now, we need to add route for pdf controller in laravel application. so open your "routes/web.php" file and add following route.

route/web.php

Route::get('graphs', 'PdfController@graphs');
Route::get('graphs-pdf', 'PdfController@graphPdf');

Step 6 : Create Controler

Here this step now we should create new controller as PdfController. So run bellow command and create new controller.

app/http/controller/PdfController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use PDF;

class PdfController extends Controller
{
    public function graphs()
    {
        return view('graph');
    }

    // function to generate PDF
    public function graphPdf()
    {
        $pdf = \PDF::loadView('graph');
        $pdf->setOption('enable-javascript', true);
        $pdf->setOption('javascript-delay', 5000);
        $pdf->setOption('enable-smart-shrinking', true);
        $pdf->setOption('no-stop-slow-scripts', true);
        return $pdf->download('graph.pdf');
    }
}

Step 7 : Create Blade File

In last step. In this step we have to create blade file for preview graph and use into pdf design. So finally you have to create following file and put bellow code:

/resources/views/graph.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Generate PDF with Graph Using Snappy in Laravel - NiceSnippets.com<title/>
    <style>
        .pie-chart {
            width: 600px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
    {{-- make sure you are using http, and not https --}}
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
        function init() {
            google.load("visualization", "1.1", {
                packages: ["corechart"],
                callback: 'drawChart'
            });
        }

        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Tea');
            data.addColumn('number', 'Populartiy');
            data.addRows([
                ['Bourn Tea', 40],
                ['Lemon Tea', 22],
                ['Green Tea', 26],
                ['Black Tea', 35], // Below limit.
                ['Special Tea', 35] // Below limit.
            ]);

            var options = {
                title: 'Popularity of Types of Tea',
                sliceVisibilityThreshold: .2
            };

            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

<body onload="init()">

<h2 style="text-align: center; ">Generate PDF with Graph Using Snappy in Laravel - NiceSnippets.com</h2>
<div id="chart_div" class="pie-chart"></div>

</body>
</html>

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/graphs
//Download PDF
http://localhost:8000/graphs-pdf

It will help you...