Membuat Invoice PDF di Laravel dengan DOMPDF

Halo teman ngide, kali ini kita akan membuat tutorial singkat agaimana cara membuat file PDF pada aplikasi web berbasis Laravel?

Diakhir tutorial ini kita akan membuat sebuah invoice dalam bentuk PDF dengan tampilan yang menarik yang bisa diunduh ataupun ditampilkan langsung di browser. Invoice ini biasanya sangat diperlukan dalam aplikasi penjualan ataupun toko online.

Nah bagaimana cara membuat PDF di Laravel? Kita akan menggunakan sebuah package bernama laravel-dompdf dari Barryvdh yang merupakan sebuah wrapper untuk plugin DOMPDF.

Caranya sangat mudah, kita hanya perlu mengistallnya lewat composer. Buka terminal dan copy paste perintah di bawah ini.

composer require barryvdh/laravel-dompdf

Setelah berhasil menginstallnya, buka file config/app.php dan  tambahkan code di bawah ini di bagian ServiceProvider

BarryvdhDomPDFServiceProvider::class,

Kamu juga bisa menambahkan facades di bawah ini.

'PDF' => BarryvdhDomPDFFacade::class,

Jika semua step diatas sudah selesai, Selanjutknya kita akan membuat sebuah view sebagai template untuk invoice yang akan kita buat.

Buat sebuah file dengan nama invoice.blade.php

Isi dengan kode di bawah ini.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>INVOICE</title>

    <style>
    .invoice-box {
        max-width: 800px;
        margin: auto;
        padding: 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        font-size: 16px;
        line-height: 24px;
        font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color: #555;
    }

    .invoice-box table {
        width: 100%;
        line-height: inherit;
        text-align: left;
    }

    .invoice-box table td {
        padding: 5px;
        vertical-align: top;
    }

    .invoice-box table tr td:nth-child(2) {
        text-align: right;
    }

    .invoice-box table tr.top table td {
        padding-bottom: 20px;
    }

    .invoice-box table tr.top table td.title {
        font-size: 45px;
        line-height: 45px;
        color: #333;
    }

    .invoice-box table tr.information table td {
        padding-bottom: 40px;
    }

    .invoice-box table tr.heading td {
        background: #eee;
        border-bottom: 1px solid #ddd;
        font-weight: bold;
    }

    .invoice-box table tr.details td {
        padding-bottom: 20px;
    }

    .invoice-box table tr.item td{
        border-bottom: 1px solid #eee;
    }

    .invoice-box table tr.item.last td {
        border-bottom: none;
    }

    .invoice-box table tr.total td:nth-child(2) {
        border-top: 2px solid #eee;
        font-weight: bold;
    }

    @media only screen and (max-width: 600px) {
        .invoice-box table tr.top table td {
            width: 100%;
            display: block;
            text-align: center;
        }

        .invoice-box table tr.information table td {
            width: 100%;
            display: block;
            text-align: center;
        }
    }

    /** RTL **/
    .rtl {
        direction: rtl;
        font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    }

    .rtl table {
        text-align: right;
    }

    .rtl table tr td:nth-child(2) {
        text-align: left;
    }
    </style>
</head>

<body>
    <div class="invoice-box">
        <table cellpadding="0" cellspacing="0">
            <tr class="top">
                <td colspan="2">
                    <table>
                        <tr>
                            <td class="title">
                                INVOICE LOGO
                            </td>

                            <td>
                                Invoice #: 123<br>
                                Created: January 1, 2015<br>
                                Due: February 1, 2015
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr class="information">
                <td colspan="2">
                    <table>
                        <tr>
                            <td>
                                Sparksuite, Inc.<br>
                                12345 Sunny Road<br>
                                Sunnyville, CA 12345
                            </td>

                            <td>
                                Acme Corp.<br>
                                John Doe<br>
                                john@example.com
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr class="heading">
                <td>
                    Payment Method
                </td>

                <td>
                    Check #
                </td>
            </tr>

            <tr class="details">
                <td>
                    Check
                </td>

                <td>
                    1000
                </td>
            </tr>

            <tr class="heading">
                <td>
                    Item
                </td>

                <td>
                    Price
                </td>
            </tr>

            <tr class="item">
                <td>
                    Website design
                </td>

                <td>
                    $300.00
                </td>
            </tr>

            <tr class="item">
                <td>
                    Hosting (3 months)
                </td>

                <td>
                    $75.00
                </td>
            </tr>

            <tr class="item last">
                <td>
                    Domain name (1 year)
                </td>

                <td>
                    $10.00
                </td>
            </tr>

            <tr class="total">
                <td></td>

                <td>
                   Total: $385.00
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Selanjutnya buat sebuah controller, misalnya dengan nama OrderController.php

Tambahkan sebuah function baru dengan nama getPDF(). Kodenya seperti berikut

...

function getPDF($type){

    $pdf = app('dompdf.wrapper')->loadView('invoice');

    if ($type == 'stream') {
        return $pdf->stream('invoice.pdf');
    }

    if ($type == 'download') {
        return $pdf->download('invoice.pdf');
    }
}
...

Buat sebuah route baru untuk memanggil controller di atas.

Route::get('print-pdf/{type}', 'OrderController@printPDF')

Sekarang kita tes di browser dengan memanggil 2 link berikut.

http://127.0.0.1:8080/print-pdf/stream

http://127.0.0.1:8080/print-pdf/download

Bagaimana? Sangat mudah bukan?

Kamu bisa bereksperimen dengan membuat berbagai macam view invoice, namun sebaiknya kamu selalu coba dahulu karena terkadang view dari html bisa berbeda denga hasil pdf yang di generate. Ini disebapkan beberapa css yang belum di support oleh DomPDF.

Please follow and like us:

Hi, Saya Agus Yusida

Hello, perkenalkan saya Agus Yusida, seorang freelancer programmer, pernah membuat startup dan suka mencoba hal-hal baru. Jika ada pertanyaan bisa DM saya di IG @yusidajohn untuk fast respond. Jangan lupa like facebook ngide.net ya!

Related Article