Tutorial Lengkap Export PDF Laravel dengan domPdf

Export Pdf Laravel – Halo semuanya, Assalaamualaikum wr wb.. Untuk tutorial kali ini, kita akan coba mempelajari tentang bagaimana cara export data ke PDF menggunakan framework Laravel..

Biasanya fitur ini disematkan pada modul sebuah report, yang mana modul report tersebut bisa di export ke berbagai macam format, salah satunya yaitu ke bentuk pdf..

Untuk dapat melakukan nya, kita akan menggunakan salah satu library package yang sudah sering saya gunakan, yaitu dompdf..

Package ini menurut saya cukup powerfull, karena selain bisa digunakan untuk export data kedalam bentuk pdf, kita juga bisa melakukan beberapa konfigurasi lainnya seperti merubah ukuran kertas, merubah posisi layout nya, dan sebagai nya..

Baiklah, langsung saja kita mulai yaa, kita mulai dari persiapan nya terlebih dahulu..

Daftar Isi

Toggle

Persiapan Export Pdf Laravel

Ada beberapa hal yang perlu dipersiapkan, yang pertama yaitu instalasi Laravel nya..

Instalasi Laravel 8

Studi kasus kali ini, versi laravel yang saya gunakan yaitu versi 8, untuk cara instalasi nya bisa kamu kunjungi halaman web official nya disini..

Database

Setelah proses instalasi laravel nya selesai, sekarang akan kita persiapkan bagian database nya..

Silahkan kalian buat database terlebih dahulu dengan nama apa saja, untuk saya sendiri memberi nama database nya dengan “sangcahayaid_pdf“..

Setelah database nya terbentuk, silahkan kalian hubungkan dengan project laravel nya, untuk konfigurasi nya bisa kalian edit pada file .env

Untuk username dan password nya, silahkan kalian sesuaikan sendiri..

Sekarang kita buat table nya, untuk studi kasus kali ini, kita akan membuat table siswa untuk menampung data-data siswa nya..

untuk pembuatan table nya bisa kita lakukan melalui file migration, di CMD/Terminal jalankan perintah berikut:

php artisan make:model Siswa -m

Perintah tersebut akan menciptakan 2 buah file baru, yaitu file Model nya dan file Migration nya..

Kita buka file migration nya untuk membuat struktur table nya, kalian isi seperti berikut:

....
    public function up()
    {
        Schema::create('siswas', function (Blueprint $table) {
            $table->id();
            $table->string('nama')->nullable();
            $table->string('no_hp')->nullable();
            $table->string('email')->nullable();
            $table->text('alamat')->nullable();
            $table->timestamps();
        });
    }
....

Setelah itu jalankan perintah berikut:

php artisan migrate

Maka nanti akan termigrasi beberapa file migration, salah satunya adalah file migration siswa..

Kalo kamu cek di phpmyadmin, maka struktur table siswa nya akan seperti ini:

Buat Dummy Data Siswa Dengan Factory

Nah sekarang kita isi table siswa nya dengan dummy data terlebih dahulu..

Agar dummy data nya seperti data real, kita bisa gunakan perintah factory, maka nanti hasilnya akan menjadi seperti berikut:

Keren kan?? Kamu bisa pelajari Faker Laravel disini..

Menampilkan data siswa nya terlebih dahulu

Sekarang kita akan menampilkan data siswa nya terlebih dahulu..

Kamu buat route baru didalam file web.php seperti berikut..

../routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SiswaController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('siswa/list', [SiswaController::class, 'index']);
Route::get('siswa/export-pdf', [SiswaController::class, 'pdf']);

Diatas kita membuat 2 buah route baru, yaitu yang mengarah ke “../siswa/list” dan “../siswa/export-pdf”..

Sekarang kamu buat controller baru dengan nama SiswaController, jalankan perintah berikut:

php artisan make:controller SiswaController

Setelah itu silahkan kalian modifikasi file SiswaController nya seperti berikut:

../app/Http/Controllers/SiswaController.php

<?php

namespace App\Http\Controllers;

use App\Models\Siswa;
use Illuminate\Http\Request;

class SiswaController extends Controller
{
    public function index()
    {
        $data = Siswa::orderBy('nama')->get();

        return view('siswa.index', compact('data'));
    }

    public function pdf()
    {
        //
    }
}

Coba kamu perhatikan SiswaController diatas:

• Pada baris ke-5 kita memanggil model Siswa nya..
• Pada baris ke-10 kita membuat function index, didalam nya terdapat variable data yang digunakan untuk menampung data siswa, yang kemudian diarahkan kedalam view siswa/index.blade.php..
• Pada baris ke-17 membuat function pdf, di function inilah nanti kita akan menulis logic dari pemroses export data nya, sekarang kita masih kosongkan terlebih dahulu..

Sekarang kita buat view nya, kalian buat file view didalam folder “../resources/views/siswa/index.blade.php”, kemudian isi seperti berikut:

<!DOCTYPE html>
<html>

<head>
    <title>sangcahaya.id</title>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div style="margin-top: 20px;">
                    <a href="{{ url('siswa/export-pdf') }}" class="btn btn-lg btn-success">Export PDF</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>No HP</th>
                                <th>Email</th>
                                <th>Alamat</th>
                                <th>Created At</th>
                                <th>Updated At</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($data as $dt)
                                <tr>
                                    <td>{{ $dt->nama }}</td>
                                    <td>{{ $dt->no_hp }}</td>
                                    <td>{{ $dt->email }}</td>
                                    <td>{{ $dt->alamat }}</td>
                                    <td>{{ $dt->created_at }}</td>
                                    <td>{{ $dt->updated_at }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</body>

</html>

Kalo kalian akses url “../siswa/list” nya, maka seharusnya akan tampil seperti berikut:

Di pojok kiri atas terdapat sebuah button yang mengarah ke url “../siswa/export-pdf”, dimana url tersebut kita gunakan untuk menjalankan proses dari export pdf nya..

Instalasi Package Dompdf

Sebelum masuk kedalam proses export data nya, kita akan lakukan instalasi package nya terlebih dahulu..

Pertama didalam Terminal/CMD, kamu arahkan kedalam directory project nya, kemudian kamu jalankan perintah berikut:

composer require barryvdh/laravel-dompdf

Tunggu beberapa saat sampai proses instalasi nya selesai seperti pada gambar diatas..

Jika kamu menggunakan laravel versi 5, maka akan ada tambahan konfigurasi pada file config/app.php seperti berikut:

Didalam array providers kamu tambahkan script berikut:

Barryvdh\DomPDF\ServiceProvider::class,

Kemudian didalam array aliases kamu tambahkan script berikut:

'PDF' => Barryvdh\DomPDF\Facade::class,

Cara Menggunakan DomPDF

Nah sekarang kita masuk kedalam cara penggunaan nya..

Untuk metode yang akan kita gunakan kali ini, yaitu membuat sebuah file pdf dari sebuah file view blade..

Jadi untuk isi/konten dari file pdf nya, akan kita buat dari sebuah file view..

Sekarang kalian buka lagi file SiswaController nya, kemudian pada function pdf kalian ubah seperti berikut:

use Barryvdh\DomPDF\Facade as PDF;
....
....
public function pdf()
{
    $data = Siswa::orderBy('nama')->get();
    $pdf = PDF::loadView('siswa.pdf', compact('data'));
    return $pdf->download('siswa.pdf');
}

Coba perhatikan script diatas:

• Pada baris ke-1 kita memanggil Class PDF nya..
• Kemudian pada baris ke-6 kita membuat variable $data untuk menampung data siswa nya..
• Baris ke-7 kita akan membuat sebuah file pdf dengan acuan dari file view siswa/pdf.blade.php
• Baris ke-8 adalah perintah untuk download file pdf nya dengan nama file nya yaitu siswa.pdf

Sekarang kita buat file view siswa/pdf.blade.php nya, dan isi seperti berikut:

<table>
    <thead>
        <tr>
            <th>Nama</th>
            <th>No HP</th>
            <th>Email</th>
            <th>Alamat</th>
            <th>Created At</th>
            <th>Updated At</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($data as $dt)
            <tr>
                <td>{{ $dt->nama }}</td>
                <td>{{ $dt->no_hp }}</td>
                <td>{{ $dt->email }}</td>
                <td>{{ $dt->alamat }}</td>
                <td>{{ $dt->created_at }}</td>
                <td>{{ $dt->updated_at }}</td>
            </tr>
        @endforeach
    </tbody>
</table>

Sekarang coba akses lagi url ../siswa/list nya, kemudian kamu klik button export pdf yang ada di pojok kiri atas, maka nanti seharusnya akan tergenerate sebuah file pdf, kalo kita buka file nya, maka akan terbentuk seperti berikut:

Diatas adalah contoh hasil dari file pdf yang sudah berhasil kita generate berdasarkan dari file view pdf.blade.php..

Stream PDF, tidak langsung di download

Terkadang kita ingin file pdf nya memiliki preview terlebih dahulu, terbuka dulu di web browser didalam tab baru, sebelum akhirnya nanti kita tentukan sendiri apakah file nya ingin di download atau tidak..

Teknik seperti ini dinamakan dengan Stream.. Untuk dapat melakukan nya, silahkan kamu buka kembali SiswaController nya, dan pada function pdf silahkan modifikasi sedikit seperti berikut:

....
    public function pdf()
    {
        $data = Siswa::orderBy('nama')->get();
        $pdf = PDF::loadView('siswa.pdf', compact('data'));
        return $pdf->stream();
    }
....

Coba perhatikan pada baris ke-6, yang sebelumnya:

return $pdf->download('siswa.pdf');

Kita ubah menjadi seperti ini:

return $pdf->stream();

Dan sekarang pada button export pdf nya, yang berada di dalam file index.blade.php, kita tambahkan atribut baru dengan nama target seperti berikut:

<a href="{{ url('siswa/export-pdf') }}" class="btn btn-lg btn-success" target="_blank">Export PDF</a>

Sekarang coba kalian akses lagi url “../siswa/list” nya, kemudian klik button export pdf nya, maka nanti akan terbuka halaman preview pdf nya didalam tab baru seperti berikut:

Mengganti Ukuran Kertas

Kita juga bisa mengganti ukuran kertas nya dengan perintah seperti berikut, silahkan modifikasi function pdf nya hingga menjadi seperti ini:

....
    public function pdf()
    {
        $data = Siswa::orderBy('nama')->get();
        $pdf = PDF::loadView('siswa.pdf', compact('data'));
        return $pdf->setPaper('a4', 'landscape')->stream();
    }
....

Sebagai contoh diatas kita merubah ukuran kertas nya menjadi a4, dan posisi kertas nya menjadi landscape..

Kamu juga bisa merubah nya ke jenis lain seperti letter, legal, dan sebagai nya..

Mengganti Jenis Font

Untuk mengganti jenis font, kamu bisa tambahkan function setOptions seperti berikut, dan menentukan nilai dari array defaultFont nya seperti berikut:

public function pdf()
{
    $data = Siswa::orderBy('nama')->get();
    $pdf = PDF::loadView('siswa.pdf', compact('data'));
    return $pdf->setPaper('a4', 'landscape')->setOptions(['defaultFont' => 'serif'])->stream();
}

Didalam setOptions ini, kamu bisa memasukkan berbagai macam jenis array konfigurasi, diantara nya yaitu:

• rootDir: “{app_directory}/vendor/dompdf/dompdf”
• tempDir: “/tmp” (available in config/dompdf.php)
• fontDir: “{app_directory}/storage/fonts/” (available in config/dompdf.php)
• fontCache: “{app_directory}/storage/fonts/” (available in config/dompdf.php)
• chroot: “{app_directory}” (available in config/dompdf.php)
• logOutputFile: “/tmp/log.htm”
• defaultMediaType: “screen” (available in config/dompdf.php)
• defaultPaperSize: “a4” (available in config/dompdf.php)
• defaultFont: “serif” (available in config/dompdf.php)
• dpi: 96 (available in config/dompdf.php)
• fontHeightRatio: 1.1 (available in config/dompdf.php)
• isPhpEnabled: false (available in config/dompdf.php)
• isRemoteEnabled: true (available in config/dompdf.php)
• isJavascriptEnabled: true (available in config/dompdf.php)
• isHtml5ParserEnabled: false (available in config/dompdf.php)
• isFontSubsettingEnabled: false (available in config/dompdf.php)
• debugPng: false
• debugKeepTemp: false
• debugCss: false
• debugLayout: false
• debugLayoutLines: true
• debugLayoutBlocks: true
• debugLayoutInline: true
• debugLayoutPaddingBox: true
• pdfBackend: “CPDF” (available in config/dompdf.php)
• pdflibLicense: “”
• adminUsername: “user”
• adminPassword: “password”

UTF-8 Support

Agar file pdf mu mendukung UTF-8, kamu tinggal tambahkan saja script berikut didalam file pdf.blade.php nya seperti berikut:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

Membuat Page Break / Halaman Terpisah

Terkadang kita ingin membuat halaman sendiri untuk Cover atau untuk judul dokumen nya..

Kalian bisa menggunakan perintah page-break, sebagai contoh:

<style>
    .page-break {
        page-break-after: always;
    }

</style>

<h1>HALAMAN 1 KHUSUS UNTUK JUDUL SAJA</h1>
<div class="page-break"></div>

<table>
    <thead>
        <tr>
            <th>Nama</th>
            <th>No HP</th>
            <th>Email</th>
            <th>Alamat</th>
            <th>Created At</th>
            <th>Updated At</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($data as $dt)
            <tr>
                <td>{{ $dt->nama }}</td>
                <td>{{ $dt->no_hp }}</td>
                <td>{{ $dt->email }}</td>
                <td>{{ $dt->alamat }}</td>
                <td>{{ $dt->created_at }}</td>
                <td>{{ $dt->updated_at }}</td>
            </tr>
        @endforeach
    </tbody>
</table>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Coba perhatikan script diatas, kita membuat sebuah style baru..

Kemudian kita melakukan pemisahan halaman dengan memanggil Class page-break nya..

Sekarang kalo kita klik ulang button export pdf nya, maka dihalaman pertama kita hanya berisi judul saja seperti berikut:

Publish Configurasi..

Kalo kamu ingin melakukan konfigurasi manual untuk dompdf nya, kalian bisa publish file konfigurasi nya dengan menjalankan perintah berikut:

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

Maka nanti akan tercipta sebuah file baru didalam config/dompdf.php..

Didalam file tersebut kamu bisa melakukan beberapa konfigurasi, seperti:

1. “orientation“, disini kita bisa menentukan default layout nya, mau portrait atau landscape..
2. “font_dir“, disini kita bisa menentukan lokasi kumpulan font-font kita..
3. “default_paper_size“, untuk nilai defaultnya yaitu a4..
4. “default_font“, kamu bisa ganti jenis default font nya, nilai bawaan nya yaitu serif..
5. “enable_php”, secara default nilai ini berisi false, jika kamu rubah menjadi true, maka DOMPDF akan mengeksekusi otomatis Script PHP yang berada didalam tag
   <script type=”text/php”> … </script>..
6. dsb..

Akhir Kata

Terima kasih, semoga bermanfaat.

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

Terima kasih..