Menampilkan PDF Di HTML Dengan Mudah

Selamat datang kembali di website malasngoding.com. Pada materi tutorial ini kita akan belajar tentang cara menampilkan file PDF di HTML di Website.

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

Baca Juga : Cara membuat cetak print laporan dari database dengan PHP

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

Persiapan Menampilkan FIle PDF

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.

persiapan menampilkan pdf di html

Setelah persiapan selesai, selanjutnya langsung saja kita mulai dengan cara yang pertama. Yaitu cara menampilkan file pdf di HTML dengan menggunakan tag embed.

Tag Embed

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

Index.html

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.

menampilkan file pdf di html

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

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

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

Penjelasan Atribut

Dengan beberapa atribut seperti berikut :

• data
  isi dengan nama dan lokasi dari file pdf yang ingin ditampilkan.
  di contoh ini langsung kita isi dengan “contoh.pdf”. sesuai dengan nama file pdf nya.
• type
  isi dengan “application/pdf” untuk memberitahukan bahwa yang ditampilkan adalah file pdf.
• width
  isi pengaturan lebar yang diinginkan
• height
  isi pengaturan tinggi yang diinginkan

Sekarang kita jalankan untuk melihat hasilnya.

menampilkan file pdf dengan tag object

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

Tag Iframe

Selanjutnya untuk cara ketiga, kita bisa guunakan tag <iframe> yang sudah disediakan oleh HTML.

index.html

Contoh di atas adalah contoh cara menampilkan file pdf di HTML dengan menggunaakan tag iframe.

Baca Juga : Kegunaan Tag Iframe Di HTML

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.

menampilkan pdf dengan tag iframe

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.

Download Source Code

Demo