Menampilkan pdf dalam halaman HTML bisa menjadi tantangan sendiri bagi anda programmer yang mungkin baru mengenal dunia koding. Pada kesempatan ini kita akan menampilkan file pdf dalam halaman, sehingga tidak perlu mendownloadnya.

Kita menggunakan jquery media yang dapat anda lihat di sini. atau Anda dapat mendownload kodenya di akhir artikel ini. Berikut ini adalah screenshot hasil yang akan kita buat.

pdf dalam html
Menampilkan file PDF dalam halaman HTML

DEMO file PDF pada HTML

Untuk membuatnya cukup mudah, tinggal buat file index.php dengan kode sebagai berikut

Pada file tersebut kita hanya memanggil jquery.media.js, kemudian menjalankan fungsi media dengan javascript. Jangan lupa panggil jquery.js juga ya sebelum memanggil jquery.media.js.

Jalankan file tersebut dan hasilnya akan terlihat pada screenshot diatas. Kita bisa malkukan scroll, zoom dan lain lain dalam halaman tersebut. Mudah bukan.

Menampilkan file PDF dalam modal bootstrap

DEMO file PDF dalam Modal Bootstrap

Pada beberapa waktu yang lalu, ada pertanyaan dari salah satu pengunjung harviacode, bagaimana menampilkan file pdf dalam modal bootstrap secara dinamis.

pdf dalam modal boostrap
Langsung saja kita lihat file index.php

Dan berikut ini adalah file hasil.php

Jalankan file index.php tersebut dan lihatlah hasilnya. Cobalah klik pada link yang ada, maka akan muncul modal dengan file pdf didalamnya sesuai dengan baris yang kita klik. Bagaimana, mudah bukan. Selamat mencoba. Jangan sungkan mengajukan pertanyaan di bawah ini bila ada kesulitan. Terima kasih.

Anda dapat mendownload seluruh kode di atas, termasuk jquery media di link di bawa ini

DOWNLOAD KODE