在做項(xiàng)目的時(shí)候，突然接收到一個(gè)需求，是能夠?qū)ζ渌脩羯蟼鞯奈募M(jìn)行預(yù)覽，然后再下載，搜索了一些方法，最終選擇了下面的實(shí)現(xiàn)，因?yàn)橹皇切枰?#xff0c;不進(jìn)行而外的操作，所以方法都是比較簡(jiǎn)單的，后續(xù)有其他需求在更新。

office文件

使用了MicroSoft官方的office預(yù)覽模式，該模式的實(shí)現(xiàn)非常簡(jiǎn)單，就是在已有的文件地址前面加入 https://view.officeapps.live.com/op/view.aspx?src= 這一串路由，等于是通過(guò)前面的路由封裝了你的文件路由：// method

let preUrl = 'https://view.officeapps.live.com/op/view.aspx?src='+ selfUrl + (token)

// render

{preType === 'office' && (

)}

ps:這個(gè)服務(wù)不支持ip地址的url，需要域名url

效果圖：

pdf文件

一開(kāi)始準(zhǔn)備使用pdf.js或者是jquery.media來(lái)實(shí)現(xiàn)，后來(lái)考慮到不需要額外操作，只是預(yù)覽，后臺(tái)更改了那邊的服務(wù)，直接在網(wǎng)頁(yè)渲染，現(xiàn)在的瀏覽器基本都能夠渲染pdf文件，方法同上：// method

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

// render

{preType === 'pdf' && (

)}

效果圖：

Video & Audio

對(duì)于音頻和視頻文件，使用了 Html 5 的 標(biāo)簽，定義一個(gè) video 并傳入 url :// method

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

// render

{(preType === 'video' || preType === 'audio') && (

)}

效果圖：

Image

就用 標(biāo)簽就好啦，這還要說(shuō)什么，頂多就是可能有多張圖片加一個(gè)上一張下一張的判定函數(shù)。

總結(jié)

以上是生活随笔為你收集整理的python实现文件上传预览_前端实现文件预览功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。