แสดง pdf ไฟล์ในเว็บเพจด้วย PDFObject อย่างง่าย

18 March 2016 เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee

pdfviewver pdf pdfobject

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ pdfviewver pdf pdfobject

สำหรับการใช้งานกรณีต้องการดึงไฟล์ pdf มาแสดงในหน้าเว็บเพจของเรา

มี plugin ให้เลือกใช้หลายตัว สามารถดูเพิ่มเติมได้ที่

http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/

ในที่นี้จะใช้ PDFObject : Embeds PDF files into HTML documents

http://pdfobject.com/index.php

ตัวอย่าง

ไม่ได้ติดตั้งโปรแกรม Adobe Reader หรือบราวเซอร์ไม่รองรับการแสดงผล PDF คลิกที่นี้เพื่อดาวน์โหลดไฟล์ PDF

โค้ดตัวอย่าง

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  

   
<div id="pdfplace">
ไม่ได้ติดตั้งโปรแกรม Adobe Reader หรือบราวเซอร์ไม่รองรับการแสดงผล PDF 
<a href="pdf/พาจิตกลับบ้าน.pdf">คลิกที่นี้เพื่อดาวน์โหลดไฟล์ PDF</a>
</div>

<script type="text/javascript" src="js/pdfobject.js"></script>
 <script type="text/javascript">
  window.onload = function (){
    var myPDF = new PDFObject({ 
		url: "pdf/พาจิตกลับบ้าน.pdf",
		id: "myPDF",
		width: "650px",
		height: "700px",
		pdfOpenParams: {
			navpanes: 1,
			statusbar: 0,
			view: "FitH",
			pagemode: "thumbs"
		}
   		}).embed('pdfplace');
  };
</script>
</body>
</html>

ถ้าดึงชื่อไฟล์จากฐานข้อมูลก็ประยุกต์ประมาณนี้

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
<?php
include 'connection.php';
$file_pdf="";
if(isset($_GET['id']) && $_GET['id']!=""){
	$myb = $_GET['id'];
	$sql = "SELECT * FROM pdf_name WHERE id='".$myb."'";
	$result = mysql_query($sql);
	$row = mysql_fetch_array($result);
	$file_pdf ="myfilepdf/".$row['pdf_name'];
}
?>
   
<div id="pdfplace">
ไม่ได้ติดตั้งโปรแกรม Adobe Reader หรือบราวเซอร์ไม่รองรับการแสดงผล PDF 
<a href="<?=$file_pdf?>">คลิกที่นี้เพื่อดาวน์โหลดไฟล์ PDF</a>
</div>

<script type="text/javascript" src="js/pdfobject.js"></script>
 <script type="text/javascript">
  window.onload = function (){
    var myPDF = new PDFObject({ 
		url: "<?=$file_pdf?>",
		id: "myPDF",
		width: "650px",
		height: "700px",
		pdfOpenParams: {
			navpanes: 1,
			statusbar: 0,
			view: "FitH",
			pagemode: "thumbs"
		}
   		}).embed('pdfplace');
  };
</script>
</body>
</html>

การตั้งค่าต่างๆ เพิ่มเติม สามารถทำได้หลายแบบทั้งแบบเต็มจอ หรือแสดงแบบที่ต้องการ ดูรายละเอียดวิธีการใช้งานได้ที่ http://pdfobject.com/index.php

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ