DEV Community: Daryl Shannon

HTML to PDF with Laravel 7 HTTP Client

Daryl Shannon — Mon, 20 Apr 2020 10:11:49 +0000

Laravel 7 has brough us a super minimal HTTP client. I'm a big fan. If you are familair with the powerful Guzzle HTTP client, you may have found it a little unintuitive or overkill for most projects.

In this breif intro, I'll show you how awesomley minimal this HTTP client is, using the Docamatic API Docamatic API (disclaimer!!! - I am the founder).

Getting Started

Assuming you have a Laravel project up and running, the first thing you need to do is obtain your API key from the Docamatic dashboard. Once you have your API key, add it to your .env file as follows:

DOCAMATIC_KEY=YOUR-API-KEY-HERE

Then, add the following to config/services.php:

    'docamatic' => [  
           'key' => env('DOCAMATIC_KEY')  
    ]

Treat your API Key as a password — keep it secret. It should not be included in public repositories, emails or client side code

Making an API Request

For demonstration purposes, create a controller named DocumentController.php as below. In a real world application you may want to use a Job that can be dispatched to a Queue or a Console Command that runs as a scheduled task.

     <?php

    namespace App\Http\Controllers;

    use Illuminate\Support\Facades\Http;

    class DocumentController extends Controller
    {
        public function create()
        {
            // Send the request
            $response = Http::withToken(config('services.docamatic.key'))->post('https://docamatic.com/api/v1/pdf', [
                'source' => 'https://example.com'
            ]);

            // Access the response data via json()
            $data = $response->json();

            // Dump out the data array
            dd($data);
        }

    }

Error Handling

A nice benefit of using the Laravel HTTP client is that you no longer need to wrap your requests within a try/catch block. Laravel provides convenient methods that you can use to determine if anything went wrong with the request.

// Determine if the status code was >= 200 and < 300...
$response->successful();

// Determine if the response has a 400 level status code...
$response->clientError();

// Determine if the response has a 500 level status code...
$response->serverError();

Blade Template To PDF

Laravel's render method will return a view as a HTML string, which we can use to populate the source parameter. As the Docamatic API doesnt have to look up an external URL, response times are usually quicker when sending raw HTML, opposed to a URL.

        // Blade template to PDF
        $response = Http::withToken(config('services.docamatic.key'))->post('https://docamatic.com/api/v1/pdf', [
            'source' => view('documents.report')->render()
        ]);

Return PDF as Base64 String

You may want to return your document as a base64 string, to save to your own storage or a database. To do so, set the encode parameter to true.

    public function create()
    {
        // Return the PDF as base64 string
        $response = Http::withToken(config('services.docamatic.key'))->post('https://docamatic.com/api/v1/pdf', [
            'source' => 'https://example.com',
            'encode' => true
        ]);

        // Access the response data via json()
        $data = $response->json();

        // Save to storage
        file_put_contents(storage_path('app/document.pdf'), base64_decode($data['document']));
    }

Delete from Storage

To delete a document from storage simply post the transaction_id of the document to be deleted.

    // Delete a document from storage  
    $response = Http::withToken(config('services.docamatic.key'))->delete('https://docamatic.com/api/v1/delete', [  
        'transaction_id' => '8c9a4943-5c13-483f-b3e4-de711e5b7006'  
    ]);

Create a responsive Bootstrap invoice

Daryl Shannon — Fri, 31 Jan 2020 15:10:14 +0000

In this article, we’re going to build a responsive Bootstrap invoice template. Many times we need to display a HTML invoice in our application, we want it to look slick on mobile too.

So what is “Responsive Design”?

In a nut shell, responsive design is a website that adapts to different screen sizes. This means that it is easy to read and interact with on a mobile devices and desktops. The cool thing about this is we don’t need to develop a different site for mobile and one for desktop, the one design will do both.

What is “Bootstrap”?

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. It’s very well documented and a really great starting point for getting into responsive design. Alternatively, you might want to check out Tailwind. It’s a beautiful framework with the same approach to responsive design. You could easily adapt this template to work with Tailwind.

Getting started

To ensure your website is responsive, you need to make sure you place the correct meta tag inside the head of your web pages like so:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen width of the device and the initial-scale=1.0 part sets the initial zoom level.

Using a custom font

For our example, I want to use a custom font “Roboto” pulled in from Google Fonts. A nice little boost to performance when using Google Fonts CDN is to precede the font import with preconnect. Just adding this line of code can reduce your page load time by 100ms – sweet!

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

Get Bootstrap

Next we need to include the Bootstrap CSS. For tutorial simplicity, we will pull in the CSS from Bootstrap’s hosted CDN. There are many different ways to include Bootstrap in your project. My preferred method is to use a package manager such as NPM. You can explore the various options available to you here.

Include the CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384…" crossorigin="anonymous">

Writing the HTML

To achieve a responsive design, we are going to utilize Bootstrap’s grid system and utilities. This will allow us to define certain behaviors for different screen sizes. To apply a breakpoint to a column for example, you would apply a class prefix such as col-sm or col-lg. I will go through some of the HTML markup to give you an idea of what is going on!

Lets have a look at our main container:

<div class="container-fluid pt-2 pt-md-4 px-md-5">

At first this may look a bit daunting. But it’s fairly straight forward once you get your head around it. It can be translated as follows:

container-fluid : our main container will fill 100% width of the screen
(not a fixed width).
pt-2 : apply padding to the top with a size of 2 (sizing runs from 1 to
5).
pt-md-4 : for screen size of medium and above, apply padding top of
size 4.
px-md-5 : for screen size of medium and above, apply padding to the
sides of size 5.

And this div can be broken down as follows:

<div class="col-md text-center text-md-left mb-3 mb-md-0">

col-md : for screen size of medium and above treat this div as a
column.
text-md-left : for screen size of medium and above align the text to
the left.
mb-3 : apply margin to the bottom of size 3.
mb-md-0 : for screen size of medium and above do not apply a margin to
the bottom.

Hopefully this brief rundown will give you a basic understanding of what is going on. Of course, you can check out the docs and get a deeper understanding of the Bootstrap grid system and utilities from the official documentation.

Here is the full markup for our invoice template:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Responsive Bootstrap Invoice Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Override some Bootstrap CDN styles - normally you should apply these through your Bootstrap variables / sass -->
    <style>
        body { font-family: "Roboto", serif; font-size: 0.8rem; font-weight: 400; line-height: 1.4; color: #000000; }
        h1, h2, h4, h5 { font-weight: 700; color: #000000; }
        h1 { font-size: 2rem; }
        h2 { font-size: 1.6rem; }
        h4 { font-size: 1.2rem; }
        h5 { font-size: 1rem; }
        .table { color: #000; }
        .table td, .table th { border-top: 1px solid #000; }
        .table thead th { vertical-align: bottom; border-bottom: 2px solid #000; }

        @page {
            margin-top: 2.5cm;
            margin-bottom: 2.5cm;
        }

        @page :first {
            margin-top: 0;
            margin-bottom: 2.5cm;
        }
    </style>

</head>
<body>

<div style="background-color: #000000; height: 10px;"></div>

<div class="container-fluid pt-2 pt-md-4 px-md-5">

    <!-- Invoice heading -->

    <table class="table table-borderless">
        <tbody>
        <tr>
            <td class="border-0">
                <div class="row">
                    <div class="col-md text-center text-md-left mb-3 mb-md-0">
                        <img class="logo img-fluid mb-3" src="https://docamatic.s3-eu-west-1.amazonaws.com/assets/360_logo.png" style="max-height: 140px;"/>
                        <br>

                        <h2 class="mb-1">360 Footwear</h2>
                        787 Brunswick, Los Angeles, CA 50028<br>
                        support@360footwear.co / 4444 555 555<br>
                        <strong>360footwear.co</strong>
                    </div>

                    <div class="col text-center text-md-right">

                        <!-- Dont' display Bill To on mobile -->
                        <span class="d-none d-md-block">
                            <h1>Billed To</h1>
                        </span>

                        <h4 class="mb-0">Casey Williams</h4>

                        57 Parkway, 5th Floor<br/>
                        New York, NY 10013<br/>
                        casey@test.com<br/>

                        <h5 class="mb-0 mt-3">14th June, 2018</h5>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- Invoice items table -->

    <table class="table">
        <thead>
        <tr>
            <th>Summary</th>
            <th class="text-right">Price</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <h5 class="mb-1">Pursuit Running Shoes</h5>
                Men's Pursuit Running Shoes - 10/M
            </td>
            <td class="font-weight-bold align-middle text-right text-nowrap">$149.00 USD</td>
        </tr>
        <tr>
            <td>
                <h5 class="mb-1">Shelby Boots</h5>
                Men's Shelby Leather Boots - 10/M
            </td>
            <td class="font-weight-bold align-middle text-right text-nowrap">$99.00 USD</td>
        </tr>
        <tr>
            <td colspan="2" class="text-right border-0 pt-4"><h5>Total: $248.00 USD</h5></td>
        </tr>
    </table>

    <!-- Thank you note -->

    <h5 class="text-center pt-2">
        Thank you for your custom!
    </h5>
</div>
</body>

Here is how our invoice looks rendered as a Letter document:

HTML to PDF

If you need to convert your HTML to PDF or want to make use of ready to go templates in your projects, please check out Docamatic (disclaimer!!! - I am the founder).

You can see the final invoice rendered as a PDF here. The source code can be downloaded from GitHub here.

Happy coding and thanks for reading!