Git

PDF、PPT、Excel、Word、视频等格式文件在线预览

PDF、PPT、Excel、Word、视频等格式文件在线预览

Posted by Angkee on November 26, 2017

最近项目中用到了文件在线预览功能,文件类型大概有图片、视频、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 格式的图片,但是关于图片,我们都可以经常看到这样的功能,点击图片,弹出图片放大的模态窗口。

给大家推荐一个非常好用的插件,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 视频以及画廊(幻灯片效果)。

如果你也有什么文件预览的奇淫巧技,来一起分享