แนวทางใช้ iframe แสดง word excel และ powerpoint บนเว็บไซต์ อย่างง่าย

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
office viewer excel word แสดงเอกสาร office บนเว็บ poperpoint

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ office viewer excel word แสดงเอกสาร office บนเว็บ poperpoint

ดูแล้ว 16,876 ครั้ง




หลักๆ แล้วเนื้อหาในบทความตอนนี้ก็ไม่มีอะไร นอกจากวิธีการนำไฟล์เอกสาร office
ไม่ว่าจะเป็นไฟล์ word excel หรือ powerpoint มาแสดงในเว็บไซต์ของเรา ผ่าน 
iframe วิธีการก็แค่เพียงเราใช้บริการ Office Web Viewer ของ Microsoft โดยเรียก
ดูไฟล์เอกสารผ่านลิ้งค์ url ด้านล่าง
 
https://view.officeapps.live.com/op/view.aspx?src=<Document Location>
 
โดยเราสามารถกำหนดในส่วนของ <Document Location> เป็น url ไฟล์เอกสารของเรา
หรือไฟล์เอกสารถออนไลน์ ที่สามารถเข้าถึงได้ในอินเทอร์เน็ต ตัวอย่างเช่น
 
ถ้า url ไฟล์ excel ของเรา เป็น
https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx
 
เราสามารถเรียกดูไฟล์ excel ออนไลน์ผ่าน url ได้ดังนี้
 
https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx
 
ทดสอบเมื่อเรานำลิ้งค์ด้านบนนี้ ไปเปิดบนบราวเซอร์ (คลิกทดสอบ)
 

ก็จะได้ผลลัพธ์ดังรูป

 
 

ตัวอย่างโค้ดการเรียกใช้งานอย่างง่ายผ่าน iframe

 
 <style>
   .myofficeviewer{
     box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
     border: 1px solid #ECECEC;
   }
  </style>
 
<iframe class="myofficeviewer" name="officeviewer" id="officeviewer1" frameborder="0" height="550" width="100%"
        src="https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx"  >  
</iframe>
 

ผลลัพธ์ที่ได้จะเป็นดังนี้

 
 
 

ตัวอย่างเราทำเป็นลิ้งค์ ส่งค่าไปแสดงใน iframe จะได้โค้ดประมาณนี้

 
  <a href="https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx" 
target="officeviewer">ไฟล์ 1</a><br/>
  <a href="https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel1.xls" 
target="officeviewer">ไฟล์ 2</a><br/>
<style>
   .myofficeviewer{
     box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
     border: 1px solid #ECECEC;
   }
  </style>
  
<iframe class="myofficeviewer" name="officeviewer" id="officeviewer1" frameborder="0" height="550" width="100%"
        src="https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx"  >  
</iframe>

 

หรือจะประยุกต์ใช้งานร่วมกับ jQuery ในลักษณะดังนี้ก็ได้

 
  <a href="javascript:void(0);" data-file="excel_by_phpexcel_database.xlsx">ไฟล์ 1</a><br/>
  <a href="javascript:void(0);" data-file="excel_by_phpexcel1.xls">ไฟล์ 2</a><br/>
<style>
   .myofficeviewer{
     box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
     border: 1px solid #ECECEC;
   }
  </style>
 
<iframe class="myofficeviewer" name="officeviewer" id="officeviewer1" frameborder="0" height="550" width="100%"
        src=""  >  
</iframe>  

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
	$("a[data-file]").on("click",function(){
      var viewerAgent = 'https://view.officeapps.live.com/op/view.aspx?src=';
      var fileUrl = 'https://www.ninenik.com/demo/PHPExcel/excel_files/';
      var fileData = $(this).data('file'); // ได้ชื่อไฟล์ที่เรากำหนดใน data-file
      var fullPathFile = viewerAgent+fileUrl+fileData;
      // console.log(fullPathFile);
      $("#officeviewer1").attr("src",fullPathFile);
    });
});
</script>
 
นอกจากนี้เรายังสามารถนำไปประยุกต์ใช้งานในลักษณะการแสดงแบบ modal ร่วมกับ bootstrap
เพิ่มเติมได้ 
 
สำหรับนามสกุลไฟล์ word excel และ powerpoint ที่รองรับการใช้งานนี้ก็ได้แก่
 
  • Word: doc, docx, docm, dotm, dotx
  • Excel: xlsx, xlsb, xls, xlsm
  • PowerPoint: pptx, ppsx, ppt, pps, pptm, potm, ppam, potx, ppsm
 
ดูตัวอย่างการแสดงผลลัพธ์ของไฟล์ประเภทต่างๆ ได้ที่ demo ด้านล่าง

 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 20-09-2017


หมายเหตุ: กรณีใช้งานผ่านมือถือ จะพบว่า เมื่อเข้าเว็บไซ์ผ่านมือถือ ตัวบริการของ microsoft จะทำการ 
redirect หรือเปลี่ยนหน้าเพจหน้านั้นไปยังหน้าแสดงเอกสารแบบเต็ม แทนหน้าเว็บเดิม 
ทำให้ไม่สามารถอ่านรายละเอียดของ เนื้อหาในหน้านั้นๆ ได้ วิธีแก้ปัญหาคือไม่ให้แสดง
เอกสาร office นั้นถ้าเข้าผ่านมือถือ โดยใช้ Attribute ของ HTML 5 กำหนดเข้าไปใน iframe
ดังนี้
 
sandbox="allow-forms allow-scripts allow-same-origin"
 
ถ้าเพิ่มเข้าไปแล้ว จะได้เป็น
 
<iframe sandbox="allow-forms allow-scripts allow-same-origin" class="myofficeviewer" name="officeviewer" id="officeviewer1" frameborder="0" height="550" width="100%"
        src="https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx"  >  
</iframe>  
 
การเพิ่มค่าข้างต้นจะทำให้ ไม่มีการแสดงเอกสาร office ในเว็บเพจนั้นผ่าน iframe ถ้าเข้าผ่านมือถือ
แต่จะแสดงปกติถ้าเข้าผ่านคอมหรือ Desktop mode
 
หรือถ้าเราต้องการให้เอกสารนั้นสามารถดูได้ในโหมดมือถือ ไม่ว่าจะใช้วิธีไหนก็ตาม
และดูผ่าน iframe ถ้าเข้าผ่านคอมหรือ Desktop mode ความต้องการในลักษณะนี้ เราสามารถ
เปลี่ยนจาก iframe เป็นลิ้งค์หน้าแสดงเอกสาร office ให้คลิกแล้วเปิดหน้าใหม่แทน
โดยใช้งานร่วมกับ PHP class ที่ชื่อ Mobile Detect ดาวน์โหลดได้ที่ http://mobiledetect.net/
ดาวน์โหลดแล้ว copy เฉพาะไฟล์ Mobile_Detect.php มาใช้งาน โดยเราสามารถนำมาประยุกต์
ได้ดังนี้
 
 
<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
?>
 <style>
   .myofficeviewer{
     box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
     border: 1px solid #ECECEC;
   }
  </style>
 <?php if($detect->isMobile()){?> 
<a href="https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx" target="_blank">ไฟล์ 1</a>
<?php }else{ ?>
<iframe   sandbox="allow-forms allow-scripts allow-same-origin"  class="myofficeviewer" name="officeviewer" id="officeviewer1" frameborder="0" height="550" width="100%"
        src="https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx"  >  
</iframe> 
<?php } ?>


 


   เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 17-05-2020


การกำหนดให้รองรับการแสดงผลใน iframe ผ่านมือถือ 

เพื่อให้รองรับการแสดงผลใน iframe ผ่านมือถือ ให้เรากำหนดค่า
ต่อไปนี้ ต่อท้ายค่าเดิม ตัวอย่าง จากเดิม
 
<iframe   sandbox="allow-forms allow-scripts allow-same-origin"  class="myofficeviewer" name="officeviewer" id="officeviewer1" frameborder="0" height="550" width="100%"
        src="https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx"  >  
</iframe> 
 
ก็ให้เพิ่ม &wdMobileHost=2 ต่อท้ายเข้าไป เป็น
 
https://view.officeapps.live.com/op/view.aspx?src=https://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx&wdMobileHost=2






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











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





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

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


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


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







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