Cara Menampilkan PDF di HTML

Ketika membuat halaman web, selain menampilkan gambar Anda juga dapat menampilkan berbagai jenis file. Salah satu file yang bisa langsung ditampilkan ialah file PDF.

Dengan menampilkan file PDF, pengunjung web dapat melihat dokumen PDF tanpa harus mendownloadnya terlebih dahulu. Hal ini tentu akan memberikan kenyamanan bagi pengunjung website Anda.

Untuk menampilkan PDF, Anda dapat menggunakan perintah HTML saja tanpa Javascript atau plugin apapun. Berikut 2 cara menampilkan file PDF di halaman website.

Daftar Isi Tutup

1 Menampilkan PDF dengan Tag Embed

2 Menampilkan PDF dengan Tag Object

3 Kesimpulan

3.1 Related

Menampilkan PDF dengan Tag Embed

Cara pertama untuk menampilkan file PDF ialah menggunakan tag <embed>. Tag <embed> berfungsi untuk memuat atau menampilkan konten eksternal. Tag <embed> memiliki beberapa parameter yaitu :

src : menentukan url sumber konten / file
type : menentukan jenis media konten yang ditampilkan
width : menentukan lebar konten
height : menentukan tinggi konten

Nah, mari kita coba menampilkan file PDF menggunakan tag embed. Contoh kode menampilkan file PDF :

<!DOCTYPE html>
<html>
  <head>
    <title>Menampilkan PDF Dengan Tag Embed</title>
  </head>
  <body>
    <h1>Dibawah ialah file PDF yang ditampilkan dengan tag embed HTML</h1>

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

  </body>
</html>

Simpanlah kode diatas disebuah file kemudian coba buka melalui web browser. Untuk melihat hasil kode diatas, silakan akses demo berikut.

Demo

Menampilkan PDF dengan Tag Object

Cara lainnya untuk menampilkan PDF ialah menggunakan tag <object>. Tag <object> memiliki beberapa parameter yaitu :

data : menentukan url sumber konten / file
type : menentukan jenis media konten yang ditampilkan
width : menentukan lebar konten
height : menentukan tinggi konten

Selanjutnya mari kita coba tampilkan PDF dengan tag <object>. Berikut contoh kode HTML-nya :

<!DOCTYPE html>
<html>
  <head>
    <title>Menampilkan PDF Dengan Tag Object</title>
  </head>
  <body>
    <h1>Dibawah ialah file PDF yang ditampilkan dengan tag object HTML</h1>

    <object data="konten.pdf" type="application/pdf" width="100%" height="600"></object>
    
  </body>
</html>

Silakan akses demo berikut untuk melihat hasil kode diatas.

Demo

Baca Juga : Membuat Desain Laporan Dengan CSS

Kesimpulan

Untuk menampilkan PDF di HTML sangatlah mudah. Anda dapat menampilkan PDF menggunakan tag <embed> ataupun <object> pada perintah HTML. Tentunya tanpa plugin apapun. Cukup mudah bukan.

Selamat mencoba dan semoga bermanfaat,.