Menampilkan File PDF Di HTML Dengan Mudah

Table of Contents

Seperti yang kita ketahui, bahwa biasanya file pdf hanya bisa dibuka dengan menggunakan software seperti nitro pdf, adobe reader dan lainnya.

Namun pada tutorial ini kita akan belajar cara menampilkan file pdf di HTML atau website.

Karena terkadang kita ingin menampilkan file PDF pada halaman website kita, entah itu pada website pribadi, website kampus, sekolah atau website lain nya.

Untuk menampilkan file pdf yang bisa langsung di download oleh pengunjung. seperti file jurnal, arsip, laporan dan berkas lainnya.

Atau mungkin teman-teman sedang mengerjakan sebuah aplikasi yang mengharuskan adanya fitur untuk menampilkan isi file pdf pada halaman website. tentunya tanpa menggunakan javascript.

Menampilkan File PDF Di HTML

Pada HTML sendiri sudah disediakan beberapa tag yang bisa kita gunakan untuk menampilkan file PDF di HTML atau pada website.

Yaitu kita bisa menggunakan tag :

• embed
• object
• iframe

Sebelumnya, untuk lebih jelas, saya akan menjelaskan dulu persiapan apa saja yang diperlukan untuk mengikuti tutorial ini.

Persiapan

Persiapan untuk contoh menampilkan pdf di html tidak rumit. kita hanya butuh 2 file berikut.

• File pdf ( contoh.pdf )
• File HTML atau PHP ( index.html )

Pertama, silahkan siapkan sebuah file pdf.

Ya tentu kita harus punya file PDF nya dong, kalau gak mau nampilin apa? hehe ..

Di sini saya sudah memililki sebuah file pdf untuk contoh percobaan kita. dan saya beri nama dengan file contoh.pdf.

Kedua kita butuh file HTML atau PHP, terserah teman-teman. karena ini hanya contoh, saya membuat sebuah file baru HTML dengan nama index.html.

Setelah persiapan selesai, selanjutnya langsung saja kita mulai dengan cara yang pertama.

Yaitu cara menampilkan file pdf di HTML dengan menggunakan tag embed.

1. Tag Embed

Untuk menampilkan PDF dengan tag embed kita bisa menggunakan tag yang sudah disediakan di HTML, yaitu tag <embed> .. </embed>.

Index.html

<h4>Contoh menampilkan file pdf dengan tag embed</h4>
<embed type="application/pdf" src="contoh.pdf"

Perhatikan contoh di atas. di sini kita bisa menampilkan file pdf dengan menggunakan tag <embed> .. </embed>.

Penjelasan Atribut

Dengan beberapa atribut seperti berikut :

• type
  pada atribut type isi dengan “application/pdf” untuk memberitahukan bahwa yang ditampilkan pada tag embed ini adalah file pdf.
• src
  isi dengan nama dan lokasi dari file pdf yang ingin ditampilkan. karena pada contoh ini file pdf dan file html berada pada 1 direktori yang sama, maka langsung saja kita tulis namanya filenya dengan “contoh.pdf”.
• width
  isi lebar dari embed yang teman-teman inginkan pada atribut width. di sini saya buat dengan lebar 600.
• height
  isi tinggi dari embed yang teman-teman inginkan pada atribut height. di sini saya buat dengan tinggi 400.

Sekarang kita jalankan untuk melihat hasilnya.

Seperti yang terlihat pada gambar contoh di atas, kita sudah berhasil menampilkan file PDF dengan menggunakan tag <embed> html.

2. Tag Object

Cara kedua, kita juga bisa gunakan tag <object> .. </object> yang sudah disediakan di HTML.

Kita bisa langsung gunakan seperti cara sebelumnya.

index.html

<h4>Contoh menampilkan file pdf dengan tag object</h4>
<object data="contoh.pdf" width="600" height="400"></object>

Perhatikan contoh di atas. di sini kita bisa menampilkan file pdf dengan menggunakan tag <embed> .. </embed>.

Penjelasan Atribut

Dengan beberapa atribut seperti berikut :

• type
  pada atribut type isi dengan “application/pdf” untuk memberitahukan bahwa yang ditampilkan pada tag embed ini adalah file pdf.
• src
  isi dengan nama dan lokasi dari file pdf yang ingin ditampilkan. karena pada contoh ini file pdf dan file html berada pada 1 direktori yang sama, maka langsung saja kita tulis namanya filenya dengan “contoh.pdf”.
• width
  isi lebar dari embed yang teman-teman inginkan pada atribut width. di sini saya buat dengan lebar 600.
• height
  isi tinggi dari embed yang teman-teman inginkan pada atribut height. di sini saya buat dengan tinggi 400.

Sekarang kita jalankan untuk melihat hasilnya.

Seperti yang terlihat pada gambar contoh di atas, kita sudah berhasil menampilkan file PDF dengan menggunakan tag <object> di html.

3. Tag Iframe

Selanjutnya untuk cara ketiga, kita bisa gunakan tag Iframe yang sudah disediakan oleh HTML

<h4>Contoh menampilkan file pdf dengan tag iframe</h4>
<iframe src="contoh.pdf" width="600" height="400"></iframe>

Penjelasan Atribut

Dengan beberapa atribut seperti berikut :

• src
  isi dengan nama dan lokasi dari file pdf yang ingin ditampilkan.
• width
  isi pengaturan lebar yang diinginkan
• height
  isi pengaturan tinggi yang diinginkan

Dan hasilnya seperti berikut.

Seperti yang terlihat pada gambar contoh di atas, preview file pdf contoh.pdf pun telah berhasil tampil seperti yang kita mau.

Dukungan browser

• Opera
• Internet Explorer
• Google Chrome
• Mozilla Firefox
• Safari

Kesimpulan

Ada 3 cara yang bisa kita gunakan untuk membuat preview file PDF di HTML/PHP, yaitu kita bisa menggunakan tag iframe, tag object dan tag embed.

Tutorial ini juga bisa teman-teman terapkan pada file PHP. asalkan peletakan dan penamaan file pdf nya sesuai dengan yg kita isi pada atribut masing-masing tag.

Semoga bisa bermanfaat.

Incoming Search Terms:

• membuat link dan menampilkan file pdf
• scrip php untuk menpilkan file pdf
• buat coding searching file pdf ke web php
• buat codingan baca pdf
• Cara cetak pdf di html
• cara download pdf di web
• cara lihat file pdf pada codeighniter
• cara membuat fitur unduh file pdf di php
• Tapilkan pdf yg di arsipkan
• cara membuka pdf tanpa download di php