关于前端:前端实现文件预览功能

在做我的项目的时候，忽然接管到一个需要，是可能对其余用户上传的文件进行预览，而后再下载，搜寻了一些办法，最终抉择了上面的实现，因为只是须要看，不进行而外的操作，所以办法都是比较简单的，后续有其余需要在更新。

office文件

应用了MicroSoft官网的office预览模式，该模式的实现非常简单，就是在已有的文件地址后面退出 https://view.officeapps.live.com/op/view.aspx?src= 这一串路由，等于是通过后面的路由封装了你的文件路由：

// methodlet preUrl = 'https://view.officeapps.live.com/op/view.aspx?src='+ selfUrl + (token)// render{preType === 'office' && (    <iframe title='预览' src={preUrl} width='860px' height='600px' ></iframe>)}

ps:这个服务不反对ip地址的url，须要域名url

效果图：

pdf文件

一开始筹备应用pdf.js或者是jquery.media来实现，起初思考到不须要额定操作，只是预览，后盾更改了那边的服务，间接在网页渲染，当初的浏览器根本都可能渲染pdf文件，办法同上：

// methodlet preUrl = (host) +  selfUrl + (token)// render{preType === 'pdf' && (    <iframe title='预览' src={preUrl} width='860px' height='600px' ></iframe>)}

效果图：

Video & Audio

对于音频和视频文件，应用了 Html 5 的 <video> 标签，定义一个 video 并传入 url :

// methodlet preUrl = (host) +  selfUrl + (token)// render{(preType === 'video' || preType === 'audio') && (    <video height='500' width='860' controls>      <source src={preUrl} />    </video>)}

效果图：

Image

就用 <img> 标签就好啦，这还要说什么，顶多就是可能有多张图片加一个上一张下一张的断定函数。