Menampilkan File PDF Di HTML Dengan Mudah

Menampilkan File PDF dalam HTML – Selamat datang kembali di website lazngoding.com. Dalam tutorial ini kita akan belajar bagaimana menampilkan file PDF dalam format HTML atau di Situs web.
Seperti yang kita ketahui, biasanya file PDF hanya bisa dibuka menggunakan software seperti Nitro PDF, Adobe Reader dan lainnya.
Namun dalam tutorial ini kita akan belajar cara menampilkan file pdf dalam HTML atau website.
Karena terkadang kita ingin menampilkan file PDF di halaman website kita, baik itu di website pribadi, website kampus, sekolah ataupun website lain.
Untuk menampilkan file pdf yang bisa langsung diunduh oleh pengunjung. seperti file jurnal, arsip, laporan dan mengajukan lain.
Atau mungkin sobat sedang mengerjakan aplikasi yang membutuhkan fitur untuk menampilkan isi file pdf di halaman website. tentu saja tanpa menggunakan javascript.
Menampilkan File PDF dalam HTML
HTML sendiri sudah menyediakan beberapa tag yang bisa kita gunakan untuk menampilkan file PDF di HTML ataupun di website.
Yakni kita bisa menggunakan tag:
- menanamkan
- obyek
- iframe.
Baca Juga: Cara membuat laporan cetak dari database dengan PHP
Sebelumnya untuk kejelasannya saya akan menjelaskan terlebih dahulu persiapan apa saja yang dibutuhkan untuk mengikuti tutorial ini.
Persiapan
Persiapan untuk contoh menampilkan pdf dalam html tidaklah rumit. kami hanya membutuhkan 2 file berikut.
- File pdf ( example.pdf )
- File HTML atau PHP ( index.html )
Pertama, silahkan siapkan file pdf.
Ya tentunya kita harus mempunyai file PDF nya, jika kita tidak mau menampilkannya? hehe ..
Di sini saya memiliki file pdf untuk percobaan sampel kami. dan saya menamakannya dengan file example.pdf.
Kedua, kita butuh file HTML atau PHP, terserah teman-teman. karena ini hanya contoh, saya membuat file HTML baru dengan nama index.html.

persiapan menampilkan pdf dalam html
Setelah persiapan selesai, selanjutnya mari kita mulai dengan cara pertama.
Itu adalah cara menampilkan file pdf dalam HTML menggunakan tag embed.
Sematkan tag
Untuk menampilkan PDF dengan embed tag, kita bisa menggunakan tag yang sudah disediakan di HTML yaitu tag.
Index.html
Contoh yang menunjukkan file pdf dengan tag embed
Perhatikan contoh di atas. disini kita bisa menampilkan file pdf menggunakan tag.
Penjelasan Atribut
Dengan beberapa atribut sebagai berikut:
- Tipe
pada atribut type isikan dengan "application / pdf" untuk menginformasikan bahwa yang ditampilkan pada embed tag ini adalah file pdf.
- src
isikan nama dan lokasi file pdf yang ingin anda tampilkan. karena pada contoh ini file pdf dan file html berada pada direktori yang sama, maka kita tinggal menuliskan nama filenya dengan "example.pdf".
- lebar
Isi lebar embed yang Anda inginkan di atribut width. disini saya membuatnya dengan lebar 600.
- tinggi
Isi tinggi embed yang Anda inginkan di atribut height. disini saya membuatnya dengan ketinggian 400.
Sekarang kita jalankan untuk melihat hasilnya.

menampilkan file pdf dalam html
Seperti yang terlihat pada contoh gambar di atas, kami telah berhasil menampilkan file PDF menggunakan tag
Tag objek
Cara kedua, kita juga bisa menggunakan tag sudah disediakan dalam HTML.
Kita bisa langsung menggunakannya seperti metode sebelumnya.
index.html
Contoh menampilkan file pdf dengan tag objek
Perhatikan contoh di atas. disini kita bisa menampilkan file pdf menggunakan tag .
Penjelasan Atribut
Dengan beberapa atribut sebagai berikut:
- data
isikan nama dan lokasi file pdf yang ingin anda tampilkan.
pada contoh ini kita langsung mengisinya dengan "sample.pdf". sesuai dengan nama file pdf. - Tipe
isi "application / pdf" untuk memberitahukan bahwa yang ditampilkan adalah file pdf.
- lebar
isi pengaturan lebar yang diinginkan
- tinggi
isi pengaturan ketinggian yang diinginkan
Sekarang kita jalankan untuk melihat hasilnya.

menampilkan file pdf dengan tag objek
Seperti yang terlihat pada contoh gambar di atas, kami telah berhasil menampilkan file PDF menggunakan tag
Tag iframe
Kemudian untuk cara ketiga kita bisa menggunakan tag
index.html
Contoh menampilkan file pdf dengan tag iframe
Contoh di atas adalah contoh cara menampilkan file pdf dalam HTML menggunakan tag
Baca Juga: Kegunaan Tag Iframe di HTML
Penjelasan Atribut
Dengan beberapa atribut sebagai berikut:
- src
isikan nama dan lokasi file pdf yang ingin anda tampilkan.
- lebar
isi pengaturan lebar yang diinginkan
- tinggi
isi pengaturan ketinggian yang diinginkan
Dan hasilnya adalah sebagai berikut.

tampilkan file pdf dengan tag iframe
Seperti terlihat pada contoh gambar di atas, preview file pdf sample.pdf sudah berhasil tampil sesuai yang kita inginkan.
Dukungan browser
- Opera
- Internet Explorer
- Google Chrome
- Mozilla Firefox
- Safari
Kesimpulan
Ada 3 cara yang bisa kita gunakan untuk melihat file PDF di HTML / PHP yaitu kita bisa menggunakan iframe, object & embed tag.
Anda juga bisa menerapkan tutorial ini ke teman-teman File PHP. asalkan penempatan dan penamaan file pdf tersebut sesuai dengan yang kita isikan di atribut masing-masing tag.
Semoga bisa bermanfaat.
Unduh Kode Sumber
Demo
Posting Menampilkan File PDF dalam HTML Mudah muncul pertama kali di Lazy Ngoding.