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

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

pdfobject pdf pdfviewver

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

ดูแล้ว 29,564 ครั้ง

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