Menampilkan File PDF Di HTML Dengan Mudah


Menampilkan File PDF Di HTML Dengan Mudah

Menampilkan File PDF Di HTML – Selamat datang kembali di website malasngoding.com. pada tutorial ini kita akan belajar tentang cara menampilkan file PDF di HTML atau 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

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.

persiapan menampilkan pdf di 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

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

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 file pdf dengan tag iframe

menampilkan file 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, object & 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

 

Incoming search terms:

  • membuat link dan menampilkan file pdf
  • menampilkan dokumen pdf di website mobile
  • menampilkan pdf di web
  • tag video
  • Tapilkan pdf yg di arsipkan



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

Membuat Game Snake Dengan HTML5 dan JQuery
cara disable resize form textarea dengan css
membuat favicon dengan html
Diskusi
Tidak Ada Komentar