最近專案中用到了檔案線上預覽功能，檔案型別大概有圖片、視訊、PDF、PPT、Excel、Word 等等，總結梳理了一下，分享給大家。
PDF 檔案型別
線上文件：http://jquery.malsup.com/media/
推薦使用 jquery.media.js，簡單易用。
PPT、Excel、Word檔案型別
不需要使用任何第三家擴充套件，使用 Office 官方提供的 Office Web Viewer 即可.
https://view.officeapps.live.com/op/view.aspx?src={yourFileOnlinePath}
視訊
常見的視訊格式有：mp4、flv、avi、mpge、3gp、h264 等等，這些格式的區別就不再贅述了。
而 H5 原生的的 video 元素支援三種視訊格式 Ogg、MPEG 4、WebM，所以我們需要更強大、支援更多視訊線上播放，第三方擴充套件庫。
在這裡推薦使用 B 站開源的視訊播放外掛 flv，一個輕量級、純 JavaScript 的視訊播放外掛。
flv.js An HTML5 Flash Video (FLV) Player written in pure JavaScript without Flash. LONG LIVE FLV!
支援的瀏覽器: Chrome, FireFox, Safari 10, IE11 and Edge.
圖片
H5 的 img 標籤足以支援 png、jpeg、jpg、gif 格式的圖片，但是關於圖片顯示，我們都可以經常看到這樣的使用場景，點選圖片，彈出圖片放大的模態視窗，我們的論壇裡面就是這樣的效果。
實現這個功能沒必須要自己再寫 JS 程式碼了，給大家推薦一個非常好用的外掛，Bootstrap Lightbox
A lightbox module for Bootstrap that supports images, YouTube videos, and galleries - built around Bootstrap's Modal plugin.
lightbox 元件是構建於 Bootstrap's Modal 元件之上，支援圖片、YouTube 視訊以及畫廊（幻燈片效果）。
如果你也有什麼檔案預覽的奇淫巧技，來一起分享 :smiley:
本作品採用《CC 協議》，轉載必須註明作者和本文連結