比較好的在線預(yù)覽的方法：

跳轉(zhuǎn)一個(gè)新的頁(yè)面，里面放一個(gè)iframe標(biāo)簽，或者object標(biāo)簽

<iframe src="xxx"></iframe> <object data="xxx"></object>

但是這兩個(gè)標(biāo)簽也有限制，有些可以直接打開(kāi)預(yù)覽，有些則直接下載，具體總結(jié)如下：

object:
ppt不支持預(yù)覽，直接下載
doc不支持預(yù)覽，直接下載
txt不支持預(yù)覽，直接下載
pdf支持打開(kāi)預(yù)覽

圖片支持預(yù)覽，圖片放大

iframe :
txt、圖片、pdf可直接打開(kāi)預(yù)覽
ppt不支持預(yù)覽，直接下載
xls不支持預(yù)覽，直接下載
doc不支持預(yù)覽，直接下載

?

所以關(guān)于預(yù)覽的功能實(shí)現(xiàn)：可以引用 microsoft的office自帶的瀏覽器預(yù)覽功能。

這個(gè)功能目前支持ppt/doc/xls 、docx /pptx/xlsx

不支持csv/圖片/txt/pdf

?

let fileext=(result.split("/")[result.split("/").length-1]).split(".")[1]; let preUrl=''; if(fileext==="doc"||fileext==='ppt'||fileext==='xls'||fileext==="docx"||fileext==='pptx'||fileext==='xlsx'){ preUrl="https://view.officeapps.live.com/op/view.aspx？src=" encodeURIComponent(result) }else{preUrl=result} $(".fileName a:first-child").attr("href","/pre?path=" preUrl);

這樣最終使用的時(shí)候，當(dāng)后綴為ppt/doc/xls 、docx /pptx/xlsx這些的時(shí)候直接跳轉(zhuǎn)到office預(yù)覽的鏈接，在src后面加文件url就可以，

office預(yù)覽鏈接：

https://view.officeapps.live.com/op/view.aspx？src=" encodeURIComponent(result) //后面加的是要跳轉(zhuǎn)的鏈接

其他格式的使用iframe直接打開(kāi)即可。

?

關(guān)于下載的問(wèn)題，目前沒(méi)有很好的解決辦法，a標(biāo)簽的download屬性經(jīng)過(guò)測(cè)試只支持路徑為相對(duì)路徑的，而不支持直接放一個(gè)http://這樣的url的。如果大家有好的辦法，希望大家多多交流！

koa2中可以更改頭部讓鏈接變?yōu)橹苯酉螺d的，但是不能更改要跳轉(zhuǎn)的鏈接，只能是自己實(shí)現(xiàn)的路由，并且如果是跳轉(zhuǎn)到自己的路由中，寫(xiě)iframe標(biāo)簽，iframe鏈接自己要下載的鏈接，下載下來(lái)的其實(shí)是包括ifram標(biāo)簽的所有代碼而已。不能直接打開(kāi)文件。

修改頭部方法如下：

ctx.type = 'application/octet-stream' ctx.set('Content-Disposition','attachment;filename=' ctx.request.query.path.split('/')[ctx.request.query.path.split('/').length-1])

?

更多專(zhuān)業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的koa中上传文件到阿里云oss实现点击在线预览和下载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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