前端實現文件預覽功能

在作項目的時候，忽然接收到一個需求，是可以對其餘用戶上傳的文件進行預覽，而後再下載，搜索了一些方法，最終選擇了下面的實現，由於只是須要看，不進行而外的操做，因此方法都是比較簡單的，後續有其餘需求在更新。

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> 標籤就好啦，這還要說什麼，頂多就是可能有多張圖片加一個上一張下一張的斷定函數。