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

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

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

  1. 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  2. PHP 上传文件至阿里云OSS对象存储

    简述 1.阿里云开通对象存储服务 OSS 并创建Bucket 2.下载PHP SDK至框架扩展目录,点我下载 3.码上code 阿里云操作 开通对象存储服务 OSS 创建 Bucket 配置Acces ...

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

    1. 阿里云OSS创建存储空间Bucket(读写权限为:公共读) 2. 拿到相关配置 accessKeyId:********* accessKeySecret:********* endpoint: ...

  4. vue + elementUi + upLoadIamge组件 上传文件到阿里云oss

    <template> <div class="upLoadIamge"> <el-upload action="https://jsonpl ...

  5. OSS上传文件到阿里云

    最近做项目,需要上传文件,因为上传到项目路径下,感觉有时候也挺不方便的,就试了一下上传文件到阿里云oss上去了, oss的使用网上有很多介绍,都是去配置一下需要的数据,然后直接调用他的api就可以了. ...

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

    2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前 ...

  7. 使用axios上传文件到阿里云对象文件存储服务器oss

    背景 OSS可用于图片.音视频.日志等海量文件的存储.各种终端设备.Web网站程序.移动应用可以直接向OSS写入或读取数据.OSS支持流式写入和文件写入两种方式.使用阿里云oss做文件存储的时候,不可 ...

  8. 如何把base64格式的图片上传到到阿里云oss c#版

    今天碰到需要把canvas上的的图片转存到阿里云oss,于是百度了半天,一个能打的答案都没有.怒了,自己搞起. 代码超级简单,需要先引入nuget 中啊里云的oss api 1 byte[] arr ...

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

    前两天帮同学实现在线预览word文档中的内容,而且需要提供可以下载的链接!在网上找了好久,都没有什么可行的方法,只得用最笨的方法来实现了.希望得到各位大神的指教.下面我就具体谈谈自己的实现过程,总结一 ...

随机推荐

  1. JAVA 生成无重复8位随机码(转)

    转载自:https://my.oschina.net/vvcumt/blog/491504 短8位UUID思想其实借鉴微博短域名的生成方式,但是其重复概率过高,而且每次生成4个,需要随即选取一个. 本 ...

  2. 图解在VC里使用graphics.h画图(相似TC)

    1 www.easyx.cn 下载 EasyX 库 我下的2014;解压后例如以下图: 2 依据自己的VC 版本号进行安装 3 在控制台画一个圆 #include <graphics.h> ...

  3. 为什么页面设计宽度要控制在960px

    其实这里涉及到了一个网页栅格系统的问题,而且这个观念是从苹果的设计师那里来的 网站 首页页面宽度 px Yahoo! 950 淘宝 950 MySpace 960 新浪 950 网易 960 Live ...

  4. 【Java】使用pinyin4j获取汉字的全拼或首字母

    汉字转拼音的工具类,常用于做汉字拼音的模糊查询. https://www.cnblogs.com/htyj/p/7891918.html

  5. window.print()局部打印三种方式

    首先准备要打印的内容,也可以打印时再填充,html中定义如下: <!--startprint--> <div id="printcontent" style=&q ...

  6. 【转】WKT、SRID、EPSG概念

    http://www.cnblogs.com/jackdong/archive/2010/12/20/1911558.html 之前一直对WKT.EPSG.SRID不是很理解,总是混淆,今天看了一下, ...

  7. MVC教程五:Action方法的返回类型

    MVC中的Action方法的返回值一般有以下几种: 类型 s说明 EmptyResult 不进行任何操作 ContentResult 将指定内容作为文本输出 JsonResult 输出JSON字符串 ...

  8. Z律师:创业项目如何玩转股权众筹?

    原文地址:http://mt.sohu.com/20150619/n415345889.shtml 大家好,这是Z律师创业学院第一期的结业课了,正式集中的课程,就到今天为止,未来有机会,还是会不定期安 ...

  9. @Resource、@Autowired跟default-autowire区别联系

    @Resource.@Autowired和default-autowire区别联系 今天看了一工程,里面既有default-autowire,又有@Autowired,还有@Resource.我就不明 ...

  10. Qt中如何根据类名来实例化对象

    对于Qt 来说,是可以做到运行时,根据对象的类名字(字符串)来获得对象的实例的,这点和一些语言的反射机制是一样的. 但是在Qt中,我们需要所额外的一步,就是注册.只要做到了注册,我们就可以 自由的创建 ...