比較好的在線預覽的方法：

跳轉一個新的頁面，里面放一個iframe標簽，或者object標簽

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

但是這兩個標簽也有限制，有些可以直接打開預覽，有些則直接下載，具體總結如下：

object:
ppt不支持預覽，直接下載
doc不支持預覽，直接下載
txt不支持預覽，直接下載
pdf支持打開預覽

圖片支持預覽，圖片放大

iframe :
txt、圖片、pdf可直接打開預覽
ppt不支持預覽，直接下載
xls不支持預覽，直接下載
doc不支持預覽，直接下載

?

所以關于預覽的功能實現：可以引用 microsoft的office自帶的瀏覽器預覽功能。

這個功能目前支持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);

這樣最終使用的時候，當后綴為ppt/doc/xls 、docx /pptx/xlsx這些的時候直接跳轉到office預覽的鏈接，在src后面加文件url就可以，

office預覽鏈接：

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

其他格式的使用iframe直接打開即可。

?

關于下載的問題，目前沒有很好的解決辦法，a標簽的download屬性經過測試只支持路徑為相對路徑的，而不支持直接放一個http://這樣的url的。如果大家有好的辦法，希望大家多多交流！

koa2中可以更改頭部讓鏈接變為直接下載的，但是不能更改要跳轉的鏈接，只能是自己實現的路由，并且如果是跳轉到自己的路由中，寫iframe標簽，iframe鏈接自己要下載的鏈接，下載下來的其實是包括ifram標簽的所有代碼而已。不能直接打開文件。

修改頭部方法如下：

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

?

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。