Menampilkan File PDF Di HTML Dengan Mudah oleh - seputarcoronaxdk.xyz
Halo sahabat selamat datang di website seputarcoronaxdk.xyz, pada kesempatan hari ini kita akan membahas seputar Menampilkan File PDF Di HTML Dengan Mudah, kami sudah mempersiapkan artikel tersebut dengan informatif dan akurat, silahkan membaca
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
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 .
Index.html
1 2 | <h4>Contoh menampilkan file pdf dengan tag embed</h4> <embed type="application/pdf" src="contoh.pdf" width="600" height="400"></embed> |
Perhatikan contoh di atas. di sini kita bisa menampilkan file pdf dengan menggunakan tag .
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
Tag Object
Cara kedua, kita juga bisa gunakan tag yang sudah disediakan di HTML.
Kita bisa langsung gunakan seperti cara sebelumnya.
index.html
1 2 | <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 .
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
Tag Iframe
Selanjutnya untuk cara ketiga, kita bisa guunakan tag
index.html
1 2 | <h4>Contoh menampilkan file pdf dengan tag iframe</h4> <iframe src="contoh.pdf" width="600" height="400"></iframe> |
Contoh di atas adalah contoh cara menampilkan file pdf di HTML dengan menggunaakan tag
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
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.
Itulah tadi informasi mengenai Menampilkan File PDF Di HTML Dengan Mudah dan sekianlah artikel dari kami seputarcoronaxdk.xyz, sampai jumpa di postingan berikutnya. selamat membaca.
Comments
Post a Comment