博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
koa中上传文件到阿里云oss实现点击在线预览和下载
阅读量:6206 次
发布时间:2019-06-21

本文共 1394 字,大约阅读时间需要 4 分钟。

比较好的在线预览的方法:

跳转一个新的页面,里面放一个iframe标签,或者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])

 

转载于:https://www.cnblogs.com/beileixinqing/p/9161486.html

你可能感兴趣的文章
Webstorm2016使用技巧——SVN插件使用(svnToolBox)
查看>>
扩展 Windows Azure 运营能力 – 巴西
查看>>
android EditText长按屏蔽ActionMode context菜单但保留选择工具功能
查看>>
微信小程序左右滑动切换页面示例代码--转载
查看>>
大道至简:软件工程实践者的思想第二章读后感
查看>>
Floodlight中 处理packetin消息的顺序(2)
查看>>
服务器80端口被占用
查看>>
vue.js 解决空格报错!!!
查看>>
Sql Server数据库笔记
查看>>
实现jQuery扩展总结
查看>>
C2 shell
查看>>
【jQuery】关于选择器中的 :first 、 :first-child 、 :first-of-type
查看>>
linux下安装虚拟环境
查看>>
dom 解析xml文件
查看>>
演示:Linux工程环境应用实训(防火墙、NAT、静态路由)详细配步骤
查看>>
Tip:强制执行exchange DAG节点之间的数据库副本移动
查看>>
[你必须知道的异步编程]——异步编程模型(APM)
查看>>
基于积分墙盈利模式的APP架构思考
查看>>
专访:混合云的发展趋势
查看>>
IBM服务器硬盘出现Other Error可能原因
查看>>