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

เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee
pdf pdfobject pdfviewver

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

ดูแล้ว 28,415 ครั้ง


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

ในที่นี้จะใช้ PDFObject : Embeds PDF files into HTML documents
ตัวอย่าง 
 
ไม่ได้ติดตั้งโปรแกรม 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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