How to display a PDF document on a webpage
In this web programming tutorial, we will display a PDF document on the website. In order to display a PDF document, it is not difficult and can be said very simple way. We simply just add the following code:
<embed src="foldername/name_file.pdf" type="application/pdf" width="100%" height="700px">The size (width and height) of window for PDF doc can be either percent or px (pixels). If in case the file is not in the folder, so we immediately call the file name.
Here is the output we will make in this tutorial, as shown in Figure 1 below:
The following code is complete source code to display PDF file or document like figure.1 above :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Menampilkan Dokumen PDF</title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<!--<link rel='stylesheet' href='assets/css/jquery-ui-custom.css'>-->
<!-- Akhir dari Bagian css -->
<!-- Bagian js -->
<script src='assets/js/jquery-1.10.1.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- akhir dari Bagian js -->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</nav>
</br></br></br>
<!--- Bagian Judul-->
<div class="container">
<h2>Contoh Mengload Dokumen PDF</h2>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="pull-left">Web Design and Web Programming</div>
<br>
</div>
<div class="panel-body">
<div>
<embed src="hukumPdf/2.pdf" type="application/pdf" width="100%" height="700px"/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>