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

18 March 2016 By Ninenik Narkdee
pdfviewver pdfobject pdf

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



สำหรับการใช้งานกรณีต้องการดึงไฟล์ 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: pdfobject pdfviewver pdf







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ