Cara Menampilkan File PDF – Apakah Anda ingin menampilkan file PDF di halaman web Anda? Jika iya, Anda berada di tempat yang tepat! Dalam panduan ini, kami akan memberikan penjelasan mengenai cara menampilkan file PDF di HTML. Ikuti instruksi di bawah ini dengan cermat, dan Anda akan berhasil menampilkan file PDF dengan mudah di situs web Anda.
Sebelum kita mulai, pastikan Anda memiliki file PDF yang ingin Anda tampilkan di situs web Anda. Pastikan juga Anda memiliki izin untuk menggunakan file tersebut secara online, jika file PDF tersebut bukan milik Anda.
Cara Menampilkan File PDF: Pendahuluan
Pada dasarnya HTML sudah memberikan tag HTML yang dapat digunakan untuk menampilkan file PDF. Berikut ini tag HTML yang dapat Anda gunakan untuk menampilkan file PDF di HTML:
- Embed
- Object
- iFrame
Berikut ini penjelasan dari masing-masing tag HTML untuk menampilkan file PDF dan bagaimana implementasi penggunaannya di HTML:
Menggunakan Embed
Langkah pertama yang perlu Anda lakukan adalah membuat file index.html, jika Anda sudah memiliki halaman untuk menampilkan PDF silahkan tambahkan kode berikut ini pada file index atau halaman yang sudah ada.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Halaman Web</title>
</head>
<body>
<embed type="application/pdf" src="contoh-file.pdf" width="700" height="800"></embed>
</body>
</html>
Penjelasan atribut dari kode tag embed yang digunakan pada kode diatas berikut ini:
<embed type="application/pdf" src="contoh-file.pdf" width="700" height="800"></embed>
- Atribut Type, ini berfungsi untuk memberitahu bahwa file yang ditampilkan hanya dalam bentuk format file PDF saja.
- Src, atribut ini berfungsi untuk mencari lokasi file yang ingin Anda tam
- pilkan. Pada penulisan kode diatas, langsung memanggil nama file ini dikarenakan posisi file berada didalam satu direktori, tanpa terpisah di lain folder. Silahkan sesuaikan lokasi file di dalam pemanggilan pada atribut src.
- Width, atribut ini berfungsi untuk mengatur lebar embed atau file yang ingin ditampilkan. value atau nilai dari width menyesuaikan kebutuhan.
- Height, merupakan tinggi dari embed atau file yang ingin ditampilkan.
Hasil kode diatas yang menggunakan tag embed seperti dibawah ini:
Menggunakan Object
Cara selanjutnya adalah menggunakan object, selain menggunakan embed Anda juga dapat menggunakan tag HTML object. Berikut cara mudahnya, tambahkan tag object pada file HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Halaman Web</title>
</head>
<body>
<object data="contoh-file.pdf" width="600" height="400"></object>
</body>
</html>
Penjelasan atribut:
- Atribut Type, ini berfungsi untuk memberitahu bahwa file yang ditampilkan hanya dalam bentuk format file PDF saja.
- Src, atribut ini berfungsi untuk mencari lokasi file yang ingin Anda tampilkan pada halaman browser. Pada penulisan kode diatas, langsung memanggil nama file ini dikarenakan posisi file berada didalam satu direktori, tanpa terpisah di lain folder. Silahkan sesuaikan lokasi file di dalam pemanggilan pada atribut src.
- Width, atribut ini berfungsi untuk mengatur lebar object atau file yang ingin ditampilkan. value atau nilai dari width menyesuaikan kebutuhan.
- Height, merupakan tinggi dari object atau file yang ingin ditampilkan.
Hasil tampilan menggunakan tag object
Menggunakan iFrame
Cara terakhir adalah menggunakan tag html iFrame. Penggunaan tag ini sangat familiar dan umum digunakan, atau dalam kata lain paling banyak digunakan. Penggunaan iFrame tidak lagi mencantumkan atribut type pada tag HTML. Berikut penggunaan tag iFrame untuk menampilkan file PDF:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Halaman Web</title>
</head>
<body>
<iframe src="contoh-file.pdf" width="600" height="400"></iframe>
</body>
</html>
Hasilnya:
Baca juga: Cara ubah Warna Placeholder di HTML
Kesimpulan
Dengan mengikuti panduan ini, Anda sekarang memiliki pengetahuan yang diperlukan untuk menampilkan file PDF di halaman web menggunakan HTML. Ingatlah untuk selalu mendapatkan izin penggunaan sebelum menampilkan konten yang bukan milik Anda.
Semoga artikel ini bermanfaat dan berhasil membantu Anda dalam mengembangkan situs web Anda. Selamat mencoba dan jangan lupa untuk terus belajar dan berkembang! Sukses selalu!
