共计 959 个字符,预计需要花费 3 分钟才能阅读完成。
在做我的项目的时候,忽然接管到一个需要,是可能对其余用户上传的文件进行预览,而后再下载,搜寻了一些办法,最终抉择了上面的实现,因为只是须要看,不进行而外的操作,所以办法都是比较简单的,后续有其余需要在更新。
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>
标签就好啦,这还要说什么,顶多就是可能有多张图片加一个上一张下一张的断定函数。
正文完