3 Cara Mudah Menampilkan File PDF di Website
File pdf biasanya di baca menggunakan pdf reader seperti adobe reader, nitro pdf dan sebagainya. Kali akan kita ulas bagaimana menampilkan file pdf agar dapat di baca secara online melalui browser seperti chrome, mozilla firefox, dan juga internet explorer.
Caranya cukup mudah dan simpel saja, berikut ini script atau tag html yang bisa di kita gunakan untuk menampilkan file pdf di browser:
Embed
Merupakan tag html yang berguna untuk membaca source dari sebuh file sehingga dapat di run atau di jalankan di browser:
Tag:
<embed>
Dukungan Browser:
- Google Chrome
- Mozilla Firefox
- Safari
- Opera
- Internet explorer
Dukungan script:
Html 4.01+
Atribut:
- height, berfungsi untuk mengatur tinggi ruang pdf
- src, source dimana link url pdf atau file
- type, bererisi tipe file dalam kasus ini pdf
- width, mengatur lebar ruang pembacaan pdf
Penggunaan:
<embed src=”file.pdf”>
Iframe
Untuk tag iframe, source yang dapat digunakan selain file pdf, word, excel,audio, video sama seperti tag embed ini dapat juga digunakan untuk menampilkan link url halaman web pada sourcenya.
Tag:
<iframe></iframe>
Dukungan Browser:
- Google Chrome
- Mozilla Firefox
- Safari
- Opera
- Internet explorer
Dukungan script:
Html 4.01+
Atribut:
- height, mengatur tinggi ruang tampil (misal:100px)
- src, link file yang akan ditampilkan (misal: file.pdf)
- width, mengatur lebar ruang tampil (misal:100px)
- align, mengatur posis tampilan misalnya kiri, kanan atas bawah (left,right,top,middle,bottom)
Penggunaan:
<iframe src=”file.pdf”></iframe>
Object
Berfungsi untuk menampilkan source file berupa file, audio, video, dokument. Perbedaannya adalah pada tag ini menampilkan link filenya menggunakan tag data
Tag:
<object></object>
Dukungan Browser:
- Google Chrome
- Mozilla Firefox
- Safari
- Opera
- Internet explorer
Dukungan script:
Html 4.01+
Atribut:
- height, mengatur tinggi ruang tampil (misal:100px)
- src, link file yang akan ditampilkan (misal: file.pdf)
- width, mengatur lebar ruang tampil (misal:100px)
- align, mengatur posis tampilan misalnya kiri, kanan atas bawah (left,right,top,middle,bottom)
Penggunaan:
<object data=”file.pdf”></object>
3 Cara menampilkan pdf di website
- <embed src=”file_name.pdf” width=”800px” height=”2100px” /><embed src=”file_name.pdf” width=”800px” height=”2100px” />
- <iframe src=”file_name.pdf” style=”width: 100%;height: 100%;border: none;”></iframe>
- <object data=”data/test.pdf” type=”application/pdf” width=”300″ height=”200″></object>
Terimakasih semoga bermanfaat