Menampilkan File PDF pada Website HTML – Hallo teman-teman semua, selamat datang kembali di website resmi dari Kecoak Sakti Official yaitu Blogbelajar. Pada tutorial kali ini kita akan belajar tentang cara menampilkan file PDF pada halaman WEBSITE kita. Seperti yang kita ketahui file PDF ini biasanya hanya dapat diakses pada komputer kita dengan menggunakan aplikasi seperti adobe reader. Namun kadang kala kita ingin menampilkan file ini ke dalam website yang kita miliki sehingga dapat diakses oleh orang lain melalui website kita.
Fitur menampilkan file berupa PDF sering kita jumpai pada website-website tertentu seperti website E-Learning sehingga siswa dapat membaca materi yang di kirim melalui website yang telah disediakan. Terdapat beberapa contoh dari penggunaan fitur ini seperti menampilkan hasil Jurnal Penelitian, Laporan, ataupun pengumuman dalam bentuk file lampiran sehingga dapat dibaca oleh pengguna melalui website.
Pada tutorial kali ini terdapat kita akan membahas cara menampilkan file yang berekstensi PDF pada halaman Website kita. Pada umumnya terdapat 3 cara mudah dalam menampilkan file ini ke dalam website kita. Penasaran bukan dengan cara pembuatannya? yok baca ulasan dibawah ini.
Cara Menampilkan File Ekstensi PDF pada WEBSITE
Pada sintak HTML itu sendiri sebenarnya sudah menyediakan beberapa fitur yang dapat kita gunakan dalam menampilkan file PDF pada website yang kita miliki. Adapun beberapa fitur yang dapat kita gunakan untuk menampilkan file PDF tersebut sebagai berikut:
- TAG IFRAME
- TAG EMBED
- TAG OBJECT
Sebelum kita masuk ke pembahasan tentang penggunaan fitur menampilkan file PDF ini, pertama-tama kita harus menyiapkan File PDF yang akan kita gunakan untuk sebagai contoh percobaan kita (501-862-1-SM.pdf). Adapun susunan file Project kita dapat dilihat seperti gambar dibawah ini.
Setelah proses persiapan selesai, selanjutnya langsung saja kita mulai proses untuk menampilkan file PDF pada website kita
#1. Menampilkan PDF dengan menggunakan TAG IFRAME
iFrame adalah singkatan dari Inline Frame yaitu sebuah komponen pada sintak HTML yang digunakan untuk menampilkan halaman lainnya pada website kita. Biasa sintak ini digunakan untuk menampilkan suatu video, dokumen, dan file lainnya ke dalam sebuah halaman website. Contoh yang paling umum yang sering kita lihat dari penggunaan iFrame adalah menampilkan video YouTube ke dalam halaman website kita.
Adapun cara menampilkan file PDF pada HTML dengan menggunakan TAG IFRAME seperti pada Sintak dibawah ini
<div>
<h4 style="background-color: blue; padding: 10px">MENGGUNAKAN TAG IFRAME</h4>
<iframe src="501-862-1-SM.pdf" width="600" height="400"></iframe>
</div>
Pada sintak iFrame ini terdapat 3 buah artibut yang dapat kita gunakan, Antara lain :
- Atribut SRC digunakan untuk menampung lokasi atau alamat dari file yang akan kita tampilkan
- Atribut WIDTH digunakan untuk mengatur ukuran lebar dari halaman file yang ditampilkan
- Atribut HEIGHT digunakan untuk mengatur ukuran tinggi dari file yang ditampilkan
Sehingga jika kita jalankan maka OUTPUT yang dihasilkan akan seperti gambar dibawah ini
#2. Menampilkan PDF dengan menggunakan TAG EMBED
Embed merupakan sintak yang ada pada HTML yang digunakan untuk memanggil suatu file atau dokumen tertentu ke halaman website kita. Sintak ini biasanya digunakan untuk meanggil file audio ataupun video ke dalam halaman website kita. Contoh sederhana yang sering kita lihat yaitu ketika kita ingin menampilkan halaman video youtube ke halaman website kita.
Adapun contoh cara penggunaan fitur ini dapat dilihat pada Sintak dibawah ini
<div>
<h4 style="background-color: yellow; padding: 10px">MENGGUNAKAN TAG EMBED</h4>
<embed type="application/pdf" src="501-862-1-SM.pdf" width="600" height="400"></embed>
</div>
Pada sintak ini terdapat empat buah atribut yang dapat kita gunakan. Adapun atribut-atribut tersebut Antara lain :
- Atribut SRC digunakan untuk menampung alamat atau lokasi file yang akan kita tampilkan
- Atribut WIDTH digunakan untuk mengatur ukuran lebar dari file yang akan ditampilkan
- Atribut HEIGHT digunakan untuk mengatur ukuran tinggi dari file yang akan ditampilkan
- Artibut TYPE berisikan informasi file yang akan kita gunakan. Atribut ini harus kita isi sesuai dengan file apa yang akan kita tampilkan pada website kita. Sebagai contoh yaitu menampilkan halaman berupa PDF maka TYPE file tersebut adalah “application/pdf“
Sehingga jika kita jalankan maka akan menghasilkan OUTPUT seperti gambar dibawah ini
#3. Menampilkan PDF dengan menggunakan TAG OBJECT
Penggunaan TAG object sama seperti pada TAG embed sebelumnya. Tag object merupakan fitur yang ada pada HTML yang digunakan untuk menampilkan file berupa audio, video, gambar, dan dokumen ke dalam website kita. Tag ini juga dapat digunakan untuk menampilkan webpage lainnya didalam webpage itu sendiri. Setiap komponen yang ditulis dalam tag object dianggap sebagai komponen alternatif yang muncul ketika data yang ditentukan tidak didukung oleh browser.
Adapun contoh dari penggunaan fitur ini dapat dilihat pada Sintak dibawah ini
<div>
<h4 style="background-color: red; padding: 10px">MENGGUNAKAN TAG OBJECT</h4>
<object data="501-862-1-SM.pdf" width="600" height="400"></object>
</div>
Pada sintak ini terdapat 3 buah atribut yang kita bisa gunakan. Adapun atribut-atribut tersebut Antara lain :
- Atribut DATA digunakan untuk menampung alamat atau lokasi file yang akan kita tampilkan pada website kita
- Atribut WIDTH digunakan untuk mengatur ukuran lebar dari file yang ditampilkan
- Atribut HEIGHT digunakan untuk mengatur ukuran tinggi dari file yang akan ditampilkan
Sehingga OUTPUT yang dihasilkan akan seperti gambar dibawah ini
Ketiga fitur diatas dapat kita gunakan dalam menampilkan file atau dokumen yang kita butuhkan. Contohnya seperti menampilkan dokumen PDF pada website kita. Disini kita bebas memilih fitur mana saja yang ingin kita gunakan. Akan tetapi kebanyakan orang sering menggunakan TAG IFRAME dalam menampilkan data tersebut. Sintak ini sangat mudah digunakan untuk menampilkan suatu file ke dalam website kita walaupun lokasi file tersebut berada pada halaman website yang lain. Sekian tutorial Cara menampilkan file PDF pada Website kita. Untuk Project lengkapnya dapat didownload pada link ((GITHUB)) kami ini.
