koa中上传文件到阿里云oss实现点击在线预览和下载
比較好的在線預(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)題。
- 上一篇: vue路由跳转报错解决
- 下一篇: 301、404、200、304、500H