Menampilkan File PDF dalam HTML – Selamat datang kembali di website lazngoding.com. Dalam tutorial ini kita akan belajar bagaimana menampilkan file PDF dalam format HTML atau di Situs web.

Seperti yang kita ketahui, biasanya file PDF hanya bisa dibuka menggunakan software seperti Nitro PDF, Adobe Reader dan lainnya.

Namun dalam tutorial ini kita akan belajar cara menampilkan file pdf dalam HTML atau website.

Karena terkadang kita ingin menampilkan file PDF di halaman website kita, baik itu di website pribadi, website kampus, sekolah ataupun website lain.

Untuk menampilkan file pdf yang bisa langsung diunduh oleh pengunjung. seperti file jurnal, arsip, laporan dan mengajukan lain.

Atau mungkin sobat sedang mengerjakan aplikasi yang membutuhkan fitur untuk menampilkan isi file pdf di halaman website. tentu saja tanpa menggunakan javascript.

Menampilkan File PDF dalam HTML

HTML sendiri sudah menyediakan beberapa tag yang bisa kita gunakan untuk menampilkan file PDF di HTML ataupun di website.

Yakni kita bisa menggunakan tag:

• menanamkan
• obyek
• iframe.

Baca Juga: Cara membuat laporan cetak dari database dengan PHP

Sebelumnya untuk kejelasannya saya akan menjelaskan terlebih dahulu persiapan apa saja yang dibutuhkan untuk mengikuti tutorial ini.

Persiapan

Persiapan untuk contoh menampilkan pdf dalam html tidaklah rumit. kami hanya membutuhkan 2 file berikut.

• File pdf ( example.pdf )
• File HTML atau PHP ( index.html )

Pertama, silahkan siapkan file pdf.

Ya tentunya kita harus mempunyai file PDF nya, jika kita tidak mau menampilkannya? hehe ..

Di sini saya memiliki file pdf untuk percobaan sampel kami. dan saya menamakannya dengan file example.pdf.

Kedua, kita butuh file HTML atau PHP, terserah teman-teman. karena ini hanya contoh, saya membuat file HTML baru dengan nama index.html.

Setelah persiapan selesai, selanjutnya mari kita mulai dengan cara pertama.

Itu adalah cara menampilkan file pdf dalam HTML menggunakan tag embed.

Sematkan tag

Untuk menampilkan PDF dengan embed tag, kita bisa menggunakan tag yang sudah disediakan di HTML yaitu tag...

Index.html

Contoh yang menunjukkan file pdf dengan tag embed

Perhatikan contoh di atas. disini kita bisa menampilkan file pdf menggunakan tag...

Penjelasan Atribut

Dengan beberapa atribut sebagai berikut:

• Tipe

  pada atribut type isikan dengan "application / pdf" untuk menginformasikan bahwa yang ditampilkan pada embed tag ini adalah file pdf.

• src

  isikan nama dan lokasi file pdf yang ingin anda tampilkan. karena pada contoh ini file pdf dan file html berada pada direktori yang sama, maka kita tinggal menuliskan nama filenya dengan "example.pdf".

• lebar

  Isi lebar embed yang Anda inginkan di atribut width. disini saya membuatnya dengan lebar 600.

• tinggi

  Isi tinggi embed yang Anda inginkan di atribut height. disini saya membuatnya dengan ketinggian 400.

Sekarang kita jalankan untuk melihat hasilnya.

Seperti yang terlihat pada contoh gambar di atas, kami telah berhasil menampilkan file PDF menggunakan taghtml.

Tag objek

Cara kedua, kita juga bisa menggunakan tag sudah disediakan dalam HTML.

Kita bisa langsung menggunakannya seperti metode sebelumnya.

index.html

Contoh menampilkan file pdf dengan tag objek

Perhatikan contoh di atas. disini kita bisa menampilkan file pdf menggunakan tag .

Penjelasan Atribut

Dengan beberapa atribut sebagai berikut:

• data

  isikan nama dan lokasi file pdf yang ingin anda tampilkan.
  pada contoh ini kita langsung mengisinya dengan "sample.pdf". sesuai dengan nama file pdf.

• Tipe

  isi "application / pdf" untuk memberitahukan bahwa yang ditampilkan adalah file pdf.

• lebar

  isi pengaturan lebar yang diinginkan

• tinggi

  isi pengaturan ketinggian yang diinginkan

Sekarang kita jalankan untuk melihat hasilnya.

Seperti yang terlihat pada contoh gambar di atas, kami telah berhasil menampilkan file PDF menggunakan tag