PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

20 September 2017 By
word poperpoint office viewer แสดงเอกสาร office บนเว็บ excel

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



หลักๆ แล้วเนื้อหาในบทความตอนนี้ก็ไม่มีอะไร นอกจากวิธีการนำไฟล์เอกสาร 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 ของเรา เป็น
http://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx
 
เราสามารถเรียกดูไฟล์ excel ออนไลน์ผ่าน url ได้ดังนี้
 
https://view.officeapps.live.com/op/view.aspx?src=http://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=http://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=http://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=http://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=http://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 = 'http://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=http://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=http://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=http://www.ninenik.com/demo/PHPExcel/excel_files/excel_by_phpexcel_database.xlsx"  >  
</iframe> 
<?php } ?>


 










Tags:: poperpoint excel แสดงเอกสาร office บนเว็บ word office viewer






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


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