Codeigniter 4 – Menampilkan file PDF dengan PDF.js

بِسْمِ اللَّهِ Mudah-mudahan tutorial Menampilkan file PDF dengan PDF.js ini bermanfaat

Menampilkan PDF pada halaman web sebenarnya gampang-gampang susah. Banyak juga komponen atau tools yang bisa dipakai untuk hal tersebut. Tapi mungkin ada beberapa komponen yang kadang-kadang tidak konsisten, bahkan bukan tampil di halaman web tapi malah di download. Hal ini biasanya masalah kompatibilitas dengan browser. Tutorial kali ini tentang bagaimana cara menampilkan file PDF di Codeigniter 4 dengan menggunakan komponen PDF.js dari Mozilla.

Persiapan Menampilkan file PDF dengan PDF.js

Yang harus ada:

Editor yang digunakan adalah Visual Studio Code
Project Codeigniter, cara membuatnya bisa dilihat disini Codeigniter 4 Pengenalan dan Instalasi
PDF.js silakan download disini atau disitusnya di https://mozilla.github.io/pdf.js/

Pertama

Download dulu PDF.js dengan link yang sudah disebutkan diatas. Kemudian ekstrak dan copy-kan ke project Codeigniter. Pada tutorial ini saya copy-kan ke \public\assets, jadinya akan seperti pada gambar sebelah kiri \public\assets\web dan \public\assets\build. Jangan lupa buatkan folder untuk upload file PDF, agar lebih teratur dan mudah dalam pengecekan. Contoh pada gambar sebelah kanan nama folder disini adalah \public\uploads\pdf

Kedua

Kemudian buat CRUD untuk pengolahan data. Pembuatan CRUD untuk input data bisa dilihan di Codeigniter 4 – CRUD Bagian 1 (Tambah data dengan upload gambar), edit data ada disini Codeigniter 4 – CRUD Bagian 2 (Update data dengan upload gambar) dan hapus data Codeigniter 4 – CRUD Bagian 3 (Hapus data). CRUD sama dengan tutorial sebelumnya bedanya cuma file yang diupload saja, tambahan pada view data.

Untuk menampilkan PDF saya tambahkan tombol PDF pada daftar/list buku seperti gambar berikut

Edit tampilan index sisipkan sebelum tombol edit, yaitu menambahkan tombol dengan gambar PDF warna hijau. Scriptnya seperti ini

...

<a href="<?= base_url('books/viewpdf/' . $row->id); ?>" class="btn btn-success btn-circle btn-sm" >
     <i class="fas fa-file-pdf"></i>
</a>
...

Tambah file view \app\Views\books\viewpdf.php

<?= $this->extend('template/index') ?>            

<?= $this->section('page-content') ?>
                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h1 class="h3 mb-4 text-gray-800"><?= $title; ?></h1>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="<?= base_url(); ?>">Halaman Utama</a></li>

                                            <li class="breadcrumb-item"><a href="<?= base_url('books'); ?>">Daftar Buku</a></li>

                                            <li class="breadcrumb-item active">

                                                <?=$title;?>

                                            </li>
                                        </ol>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end page title -->                                 
<object data="<?php echo base_url('assets/web/viewer.html').'?file='.base_url('uploads/pdf').'/'.$books->url ?>" type="application/pdf" width="100%" height="800">
    <p><a href="<?php echo base_url('assets/web/viewer.html').'?file='.base_url('uploads/pdf').'/'.$books->url ?>">Click to access viewer.html</a></p>
</object><?= $this->endSection() ?>  

Ketiga

Update controller disini saya beri nama Books. Untuk menampilkan saya tambahkan fungsi viewpdf, scriptnya seperti ini

...

    public function viewpdf($id)
    {
        $model = new BooksModel(); 
        $data['books'] = $model->getBooks($id);

        $data['title'] = 'Lihat PDF';
        $data['menu'] = 'books';
        return view('books/viewpdf', $data);
    }

...

Terakhir

Silakan dicoba dan semoga berhasil

Troubleshooting

Ada 2 kemungkinan jika Anda menemui error, dengan detail error (lihat dengan klik tombol More Information)

PDF.js v2.4.456 (build: 228a591c)
Message: Unexpected server response (204) while retrieving PDF

Error seperti gambar berikut

• Ada download manager yang terintegrasi dengan browser, bisa diatasi dengan men-disabled intergrasi tersebut
• Masalah dengan SSL, biasa terjadi pada server http atau development (http://localhost:8080/). Hal ini diatasi dengan diinstal SSL atau langsung saja di upload ke hosting

Semoga tutorial ini bermanfaat.