Belajar Web Programming PHP, HTML, MySQL dan Tutorial

Contoh Kode Menampilkan PDF Di Web

Kebutuhan dokumen digital sudah bukan menjadi hal yang asing lagi di masa sekarang. File dengan format PDF menjadi sangat populer dalam mempublikaskan dokumen dalam bentuk digital. Untuk membuka file tersebut biasanya kita membutuhkan software lain seperti Adobe Reader, Foxit dan lain-lain untuk membukanya. Namun dengan HTML5 kita dapat membuka file PDF melalui browser yang mendukung HTML5 dengan sangat mudah. Bagaimana caranya akan dijelaskan pada artikel kali ini.

Prosedur menampilkan file PDF dengan HTML5 pada dasarnya mirip dengan cara menampilkan gambar, yaitu dengan mengetahui direktori dan nama file pdf yang akan ditampilkan sehingga pada saat melakukan embed kode program kita tinggal memasukan url dari file pdf tersebut.

Kode dasar untuk menampilkannya cukup sederahana seperti berikut ini:
<embed src="direktori/nama_file.pdf" type="application/pdf" width="100%" height="600px"></embed>

Tag yang digunakan adalah <embed> dengan beberapa atribut berikut ini:

  • src: sebagai atribut untuk mendefinisikan direktori dari file pdf yang akan dibuka
  • type: sebagai atribut untuk mendifinisikan jenis/tipe file 
  • width: sebagai atribut untuk menentukan lebar object dalam bentuk pixel atau persen (layar)
  • height: sebagai atribut untuk menentukan tinggi object dalam bentuk pixel atau persen (layar)

Bagaimana cukup mudah bukan? untuk contoh kode dalam menampilkan PDF di Web dapat dilihat berikut ini:
<h1>Menampilkan PDF dengan HTML5</h1>
<hr>
<a href="?file=01">Sampel 01</a> | <a href="?file=02">Sampel 02</a>
<hr>
<?php
$file=isset($_GET['file'])?$_GET['file']:"";
if(empty($file) or $file=="01") { $pdf = "data/sampel01.pdf"; }
if($file=="02") { $pdf = "data/sampel02.pdf"; }
?>
<b>Document</b>
<br>
<embed src="<?php echo $pdf;?>" type="application/pdf" width="800" height="600" ></embed>

Hasil Program


Labels: HTML5, PDF, Tutorial

Terima kasih telah membaca Contoh Kode Menampilkan PDF Di Web. Bila bermanfaat boleh di share yah :)

1 Comment for "Contoh Kode Menampilkan PDF Di Web"

Back To Top