-->

Iklan bawah header

Cara Menampilkan Dokumen PDF pada HTML

dokumen pdf pada html

Saat berselancar di dunia maya, mungkin kita sudah sering menjumpai berbagai macam tipe file dokumen seperti pdf, picture, audio, ppt, docx, dan lainnya. File tersebut dapat kita temukan tidak lain karena adanya sumbangsih dari para author di internet yang melakukan upload dokumen.

Seperti yang kita ketahui, biasanya dokumen tersebut hanya bisa dibuka menggunakan software seperti adobe reader, nitro pdf dan lainnya. Namun pada tutorial kali ini kita akan membahas tentang cara menampilkan file pdf tanpa javascript di HTML atau browser.

Menampilkan File PDF pada HTML tanpa JavaScript

Untuk menampilkan file pdf di html atau pada browser, kita bisa menggunakan beberapa tag yang sudah disediakan di HTML.

Berikut beberapa tag yang bisa kita gunakan :

  • object
  • embed
  • iframe

Sebelum mengikuti tutorial ini, persiapkanlah file pdf-nya terlebih dahulu.

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

Tag Object

Cara yang pertama kita akan mengunakan tag <object> ... </object> yang sudah disediakan di HTML.

Lihat contoh berikut ini.


<h4>menampilkan file pdf dengan tag object</h4>
<object data="contoh.pdf" width="500" height="300"></object>

Contoh diatas merupakan cara untuk menampilkan file pdf dengan menggunakan tag <object> ... &lt/object>

Penjelasan Atribut

Berikut penjelasan beberapa atribut yang ada pada tag object :

  • data diisi dengan nama dan lokasi dari file yang ingin ditampilkan.
  • type diisi dengan "application/pdf" untuk memberitahukan bahwa file yang ingin ditampilkan adalah file pdf
  • width untuk menentukan lebar yang diinginakan
  • height untuk menentukan tinggi yang diinginkan

Tag Embed

Untuk cara yang kedua kita bisa menggunakan tag <embed> ... </embed>. Untuk penggunaannya bisa kalian lihat pada contoh dibawah ini.


<h4>menampilkan file pdf dengan tag embedlt;/h4>
<object type="application/pdf" src="contoh.pdf" width="500" height="300"></object>

Tag Iframe

Untuk cara yang terakhir kita bisa menggunakan tag <iframe> yang sudah disediakan oleh HTML. Untuk penggunaanya bisa kalian lihat contoh berikut ini.


<h4>menampilkan file pdf dengan tag iframe</h4>
<object src="contoh.pdf" width="500" height="300"></object>

Demikianlah beberapa cara yang bisa kalian gunakan untuk membuat preview file pdf di HTML.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel