PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

18 March 2016 By
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






Tags:: pdfviewver pdfobject pdf






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


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