前端实现文件预览功能

在做项目的时候，突然接收到一个需求，是能够对其他用户上传的文件进行预览，然后再下载，搜索了一些方法，最终选择了下面的实现，因为只是需要看，不进行而外的操作，所以方法都是比较简单的，后续有其他需求在更新。

ps:这样的方法对于安全性要求较高，或者文档需要保密的基本无效，因为他会把用户数据先上传一份到office服务上面，当然，只要开了office online都会，有时候不知道该怎么说这样的安全性考虑。。。

office文件

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

// method
let 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文件，方法同上：

// method
let preUrl = (host) +  selfUrl + (token)

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

效果图：

Video & Audio

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

// method
let preUrl = (host) +  selfUrl + (token)

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

效果图：

Image

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