koa中上传文件到阿里云oss实现点击在线预览和下载

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

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

原文地址:https://www.cnblogs.com/beileixinqing/p/9161486.html

时间: 2024-10-26 12:58:12

koa中上传文件到阿里云oss实现点击在线预览和下载的相关文章

PHP上传文件到阿里云OSS,nginx代理访问

1. 阿里云OSS创建存储空间Bucket(读写权限为:公共读) 2. 拿到相关配置 accessKeyId:********* accessKeySecret:********* endpoint:******** bucket:******** 3.创建 oss.php 上传类 (基于thinkPHP5) <?php namespace app\controller; use OSS\OssClient; class Oss { private static $_instance; priv

OSS上传文件到阿里云

最近做项目,需要上传文件,因为上传到项目路径下,感觉有时候也挺不方便的,就试了一下上传文件到阿里云oss上去了, oss的使用网上有很多介绍,都是去配置一下需要的数据,然后直接调用他的api就可以了. 这里贴一段可以直接使用的oss代码,有需要的可以自己参考下. @Controller @RequestMapping("/ossfile") public class OSSFileController { @Autowired private EventidService eventi

Mac/Linux/Centos终端中上传文件到Linux云服务器

Mac/Linux/Centos终端中上传文件到Linux云服务器 1.mac上传文件到Linux服务器 scp 文件名 用户名@服务器ip:目标路径如:scp /Users/test/testFile [email protected]:/test/ 2.mac上传文件夹到Linux服务器,与上传文件相比多加了-r scp -r 文件夹目录 用户名@服务器ip:目标路径 如:scp -r /Users/test/testFolder [email protected]:/test/ 3.Lin

angulaijs中的ng-upload-file与阿里云oss服务的结合,实现在浏览器端上传文件到阿里云(速度可以达到1.5M)

angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前只有"cn-hangzhou"这个region可用, 不要使用填写其他region的值 //<setting name="accessKeyId" value="H6JSh0Y****z2cGa" /> //<setting name="ecr

JSP实现word文档的上传,在线预览,下载

前两天帮同学实现在线预览word文档中的内容,而且需要提供可以下载的链接!在网上找了好久,都没有什么可行的方法,只得用最笨的方法来实现了.希望得到各位大神的指教.下面我就具体谈谈自己的实现过程,总结一下学习中的收获. 我相信很多程序员都遇到过,有些word文档希望直接在浏览器中打开进行预览,但是浏览器往往不是很配合,直接就提示下载,不像pdf文档,浏览器可以直接进行预览.Word文档甚至始终都会通过本地的Office软件打开.那么,问题来了,如何可以在线浏览word文档呢? 其实,我在最初的时候

上传指定url文件到阿里云oss

好处是不用下载到本地,也不用删除本地文件.省事! 先下载阿里云官方代码  https://github.com/aliyun/aliyun-oss-csharp-sdk 引用其中的 aliyun-oss-sdk 项目 代码如下: string endpoint = "http://oss-cn-beijing.aliyuncs.com"; OssClient client = new OssClient(endpoint, accessId, accessKey); var webCl

PHP实现阿里云OSS文件上传(支持批量)

上传文件至阿里云OSS,整体逻辑是,文件先临时上传到本地,然后在上传到OSS,最后删除本地的临时文件(也可以不删,具体看自己的业务需求),具体实现流程如下: 1.下载阿里云OSS对象上传SDK(PHP版) 通过Github下载 2.解压后,可自行修改目录名称,以下为本人项目实例(aliyun_oss改过之后的名称) 项目目录结构如下: 3.Index.php 为文件上传静态表单页 4.do_upload.php 为文件处理控制页,封装的代码如下:上传文件相关的辅助函数可以自行封装,本文是为了便于

物联网架构成长之路(18)-接阿里云OSS服务

1.申请/购买OSS服务 在阿里云上申请/购买OSS服务, 然后在会得AccessKeyID,AccessKeySecret,bucketName 这三个东西 2.增删改查 在pom.xml文件上增加 1 <!-- https://mvnrepository.com/artifact/com.aliyun.oss/aliyun-sdk-oss --> 2 <dependency> 3 <groupId>com.aliyun.oss</groupId> 4 &

Java下载https文件上传到阿里云oss服务

今天做了一个从Https链接中下载音频并且上传到OSS服务器,记录一下希望大家也少走弯路. 一共两个类: 1 实现自己的证书信任管理器类 /** * @author mazhq * @Title: X509TrustUtiil * @ProjectName: zeus * @Description: 证书信任管理器类 * @date 2019/2/18 15:14 */ public class X509TrustUtil implements X509TrustManager { @Overr