PDF、PPT、Excel、Word、視訊等格式檔案線上預覽

angkee發表於2017-11-26

最近專案中用到了檔案線上預覽功能,檔案型別大概有圖片、視訊、PDF、PPT、Excel、Word 等等,總結梳理了一下,分享給大家。

PDF 檔案型別

  1. jquery.media.js

線上文件:http://jquery.malsup.com/media/

  1. pdf.js

推薦使用 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 元素支援三種視訊格式 OggMPEG 4WebM,所以我們需要更強大、支援更多視訊線上播放,第三方擴充套件庫。

在這裡推薦使用 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 協議》,轉載必須註明作者和本文連結

路漫漫其修遠,要走的路還很長

相關文章