Cara menampilkan file PDF di halaman website dengan html | PDF merupakan salah satu file yang sering digunakan untuk menampilkan dokumen di Internet. Sedikit berbeda dengan Microsoft Word, file PDF dirasa lebih aman karena agak sulit untuk dimanipulasi.

pdf html

Menampilkan file pdf di html (Image: div-arena.com )

File PDF biasanya digunakan untuk mempublikasikan jurnal ilmiah, paper, skripsi, tutorial, proposal, invoice pembayaran dan lain sebagainya. Jadi sangat efektif jika sebuah halaman website bisa langsung menampilkan file PDF tanpa perlu menampilkan permintaan untuk mendownload terlebih dahulu.

Menampilkan file PDF di halaman website HTML juga bisa berguna untuk orang-orang yang ingin membuat website perpustakaan misalnya.

Cara Menampilkan File PDF dengan HTML

Kita bisa menampilkan file PDF dengan mudah di halaman website dengan melakukan embed di HTML, berikut cara singkatnya.

Cukup membuat sebuah file html dengan nama index.html.

Lalu tuliskan script seperti berikut ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara menampilkan file PDF di halaman website HTML (EMBED)</title>
</head>
<body>
	<embed src="LOKASI_FILE.pdf" width="550" height="600"> </embed>
</body>
</html>

Bagian yang perlu diperhatikan adalah pada baris ke-8 yang berisikan tag embed, disitu kita bisa menentukan lebar(width), tinggi(height) dan url dari file PDF yang ingin ditampilkan.

DEMO | DOWNLOAD CODE

Sangat mudah bukan? tidak perlu script yang panjang-panjang, cukup singkat dan file PDF bisa tampil di halaman website Anda tanpa muncul permintaan untuk mendownload.

Tag embed juga bisa digunakan untuk menampilkan file-file lain seperti file audio dan video.

Semoga berguna..

Artikel Lain:

contoh tag html8 Video Tutorial Belajar HTML Dasar untuk Pemula kunci konten website jqueryKunci Konten Web Agar Tidak Bisa di Edit di Inspect Element / Developer Tool background video html5Cara Membuat Background Video Full-Screen dengan HTML5 & Jquery background slideshow dengan jqueryCara Membuat Background Slideshow dengan Jquery redesign websiteTips Mengganti Theme Web Untuk Menambah Pengunjung apache xampp virtual hostCara Membuat Virtual Host di XAMPP Windows google maps wordpress shortcodeCara Memasang Google Maps Responsive di WordPress Tanpa Plugin google maps embed codeCara Mendapatkan Kode Embed Google Maps back to topMembuat tombol scroll ke atas (back to top) dengan jQuery Universitas Padjajaran UNPAD15 Website Universitas di Indonesia yang dibuat dengan WordPress desain poster photoshop32 Video Tutorial Membuat Desain Poster dengan Photoshop PHP MySQLCara Membuat Database MySQL Dengan PHP