Menampilkan dokumen PDF langsung di halaman web adalah fitur yang sering dibutuhkan, baik untuk menampilkan laporan, e-book, atau panduan pengguna. Kamu bisa melakukannya dengan mudah menggunakan beberapa metode di HTML. Artikel ini akan membahas tiga cara yang paling umum dan efektif.

1. Menggunakan Elemen <iframe> (Paling Populer)

Metode ini adalah cara paling umum dan direkomendasikan. Elemen <iframe> digunakan untuk menyisipkan dokumen lain (dalam hal ini, file PDF) di dalam halaman web saat ini.

Contoh Kode HTML:

<iframe src="nama-file.pdf" width="100%" height="600px">
  <p>Browser kamu tidak mendukung iframe. Silakan <a href="nama-file.pdf">unduh PDF</a> untuk melihatnya.</p>
</iframe>

Penjelasan:

• <iframe>: Elemen utama untuk menyematkan dokumen.
• src="nama-file.pdf": Atribut ini menentukan jalur atau URL dari file PDF yang ingin kamu tampilkan. Pastikan jalur file sudah benar.
• width dan height: Atribut ini digunakan untuk mengatur ukuran (lebar dan tinggi) dari bingkai PDF yang akan ditampilkan. Kamu bisa menggunakan satuan piksel (px) atau persentase (%).
• sandbox: (Opsional) Atribut ini digunakan untuk keamanan. Kamu bisa menambahkan sandbox untuk membatasi beberapa fungsionalitas dari dokumen yang disematkan, seperti eksekusi skrip.
• Teks di dalam <p> akan ditampilkan jika browser tidak mendukung <iframe>. Ini adalah praktik yang baik untuk memastikan semua pengguna bisa mengakses konten PDF dengan opsi unduh.

2. Menggunakan Elemen <embed>

Elemen <embed> mirip dengan <iframe> namun secara historis digunakan untuk menyisipkan konten eksternal yang tidak memiliki standar HTML, seperti plugin. Meski sudah tidak sepopuler <iframe>, metode ini masih berfungsi dengan baik di banyak browser modern.

Contoh Kode HTML:

<embed src="nama-file.pdf" type="application/pdf" width="100%" height="600px">

Penjelasan:

• <embed>: Elemen untuk menyisipkan konten.
• src="nama-file.pdf": Atribut untuk menentukan sumber file PDF.
• type="application/pdf": Atribut ini membantu browser mengenali jenis konten yang disematkan, memastikan browser menggunakan viewer PDF bawaannya.
• Atribut width dan height juga digunakan untuk mengatur ukuran tampilan.

3. Menggunakan Elemen <object>

Elemen <object> adalah elemen serbaguna yang bisa digunakan untuk menyisipkan berbagai jenis media, termasuk PDF. Mirip dengan <iframe> dan <embed>, namun dengan sedikit sintaks yang berbeda.

Contoh Kode HTML:

<object data="nama-file.pdf" type="application/pdf" width="100%" height="600px">
  <p>Browser kamu tidak mendukung object. Silakan <a href="nama-file.pdf">unduh PDF</a> untuk melihatnya.</p>
</object>

Penjelasan:

• <object>: Elemen untuk menyisipkan objek.
• data="nama-file.pdf": Atribut ini menggantikan src dan berfungsi sama, yaitu menentukan sumber file.
• type="application/pdf": Atribut ini, seperti pada <embed>, membantu browser mengidentifikasi tipe konten.
• Konten di dalam elemen <object> (yaitu paragraf teks) akan ditampilkan sebagai konten fallback jika browser tidak dapat menampilkan PDF.

Ringkasan dan Rekomendasi

Jadi, untuk menampilkan file PDF dengan mudah, gunakan elemen <iframe>. Ini adalah metode yang paling andal, aman, dan didukung oleh semua browser modern. Pastikan file PDF yang kamu tampilkan berada di server yang sama atau memiliki URL yang dapat diakses publik.