Menampilkan File PDF pada HTML

0
1485

Untuk menampilkan file PDF pada browser dapat dilakukan dengan memanfaatkan tag HTML <embed>, tag HTML ini sangat tepat digunakan untuk menampilkan file PDF pada HTML.

Seperti diketahui terkadang kita membutuhkan sebuah file PDF yang perlu kita tampilkan pada halaman website yang kita buat. Sehingga isi file PDF tersebut secara langsung dapat kita baca pada halaman website tanpa harus mendownloadnya terlebih dahulu.

Sehingga dari kasus diatas dapat kita tarik garis besar bagaimana kita dapat menampilkan file PDF pada halaman HTML atau website sehingga kita dapat langsung membacanya tanpa harus mendownloadnya terlebih dahulu.

Berikut ini adalah langkah-langkah cara menampilkan file PDF di halaman website menggunakan tag HTML <embed>.

Langkah pertama, yang perlu kita siapkan adalah project kerja, sehingga pada kasus ini saya menggunakan nama project display_pdf yang saya letakkan pada folder www pada localserver.

Langkah ke-dua, adalah meyiapkan file PDF itu sendiri pada project kerja secara langsung ataupun mengelompokkannya kedalam sub folder. Pada kasus disini saya menempatkan file PDF pada sub folder.

Setelah persiapan diatas telah kita lakukan, maka langkah selanjutnya adalah membuat file index.html pada folder kerja. Dimana file index.html ini berisikan potongan tag HTML <embed> yang berfungsi untuk menampilkan file PDF pada browser.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menampilkan File PDF pada HTML </title>
</head>
<body> 
    <h3>Menampilkan File PDF pada HTML</h3>     
    <embed type="application/pdf" src="pdf/PERMENDAGRI NO. 90 TAHUN 2019.pdf" width="800" height="600"></embed>
</body>
</html>

Pada contoh diatas berisikan cara menampilkan file PDF pada halaman HTML menggunakan tag <embed>

Penjelasan atribut html

1. type
atribut type diisi “application/pdf”, yang berfungsi untuk memberitahukan bahwa file yang akan ditampilkan pada browser adalah berupa file PDF.
2. src
atribut src digunakan untuk membaca lokasi file PDF yang akan ditampilkan ke browser sehingga diisi src=”pdf/PERMENDAGRI NO. 90 TAHUN 2019.pdf”.
3. width
atribut width digunakan untuk memberikan efek seberapa lebar display file PDF akan ditampilkan pada browser
4. height
atribut height digunakan untuk memberi efek seberapa tinggi display file PDF yang akan ditampilkan pada browser

Langkah selanjutya adalah kita jalankan project kerja untuk melihat hasilnya, jika berjalan dengan baik maka akan ditampilkan halaman seperti berikut jika kita akses menggunakan browser Google Chrome,

Menampilkan File PDF pada HTML

Sedangkan jika kita akses menggunakan browser Mozilla Firefox akan ditampilkan halaman seperti berikut.

Menampilkan File PDF pada HTML

Diatas adalah salah satu contoh cara menampilkan file PDF pada HTML, selain menggunakan tag <embed>, untuk menampilkan file PDF ke HTML browser kita juga dapat menggunakan tag HTML lainnya seperti tag <object>, serta tag HTML <iframe>