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])
koa中上传文件到阿里云oss实现点击在线预览和下载的更多相关文章
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
- PHP 上传文件至阿里云OSS对象存储
简述 1.阿里云开通对象存储服务 OSS 并创建Bucket 2.下载PHP SDK至框架扩展目录,点我下载 3.码上code 阿里云操作 开通对象存储服务 OSS 创建 Bucket 配置Acces ...
- PHP上传文件到阿里云OSS,nginx代理访问
1. 阿里云OSS创建存储空间Bucket(读写权限为:公共读) 2. 拿到相关配置 accessKeyId:********* accessKeySecret:********* endpoint: ...
- vue + elementUi + upLoadIamge组件 上传文件到阿里云oss
<template> <div class="upLoadIamge"> <el-upload action="https://jsonpl ...
- OSS上传文件到阿里云
最近做项目,需要上传文件,因为上传到项目路径下,感觉有时候也挺不方便的,就试了一下上传文件到阿里云oss上去了, oss的使用网上有很多介绍,都是去配置一下需要的数据,然后直接调用他的api就可以了. ...
- angulaijs中的ng-upload-file与阿里云oss服务的结合,实现在浏览器端上传文件到阿里云(速度可以达到1.5M)
2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前 ...
- 使用axios上传文件到阿里云对象文件存储服务器oss
背景 OSS可用于图片.音视频.日志等海量文件的存储.各种终端设备.Web网站程序.移动应用可以直接向OSS写入或读取数据.OSS支持流式写入和文件写入两种方式.使用阿里云oss做文件存储的时候,不可 ...
- 如何把base64格式的图片上传到到阿里云oss c#版
今天碰到需要把canvas上的的图片转存到阿里云oss,于是百度了半天,一个能打的答案都没有.怒了,自己搞起. 代码超级简单,需要先引入nuget 中啊里云的oss api 1 byte[] arr ...
- JSP实现word文档的上传,在线预览,下载
前两天帮同学实现在线预览word文档中的内容,而且需要提供可以下载的链接!在网上找了好久,都没有什么可行的方法,只得用最笨的方法来实现了.希望得到各位大神的指教.下面我就具体谈谈自己的实现过程,总结一 ...
随机推荐
- ython strip lstrip rstrip使用方法
Python中的strip用于去除字符串的首尾字符,同理,lstrip用于去除左边的字符,rstrip用于去除右边的字符. 这三个函数都可传入一个参数,指定要去除的首尾字符. 需要注意的是,传入的是一 ...
- C语言 · 色盲的民主
算法提高 色盲的民主 时间限制:1.0s 内存限制:256.0MB 问题描述 n个色盲聚在一起,讨论一块布的颜色.尽管都是色盲,却盲得各不相同.每个人都有自己的主张,争论不休.最终, ...
- Spring WebSocket教程(二)
实现目标 这一篇文章,就要直接实现聊天的功能,并且,在聊天功能的基础上,再实现缓存一定聊天记录的功能. 第一步:聊天实现原理 首先,需要明确我们的需求.通常,网页上的聊天,都是聊天室的形式,所以,这个 ...
- Java通过ssh连接到Linxu和Windos服务器远程启动Tomcat
一.Linxu服务器远程启动tomcat 1.首先确保linxu服务器上的tomcat jdk等必要软件正确安装,并且可以正常启动. 2.编写Java SSH工具类. 相关jar包: <depe ...
- Python 读取数据
将一个文件夹下面的图像和对应的pts读进来,然后把pts文件里面的数据读入一个数组,然后画到图像上: # -*- coding:utf- -*- """ 测试数据样例 & ...
- VC中使用ADO操作数据库的方法 SQL2000
(1).引入ADO类 #import "c:\program files\common files\system\ado\msado15.dll" \ no_namespace \ ...
- Crystal Reports 版权疑问
以前一直以为Crystal Reports是微软公司的产品,由于最近公司项目用到Crystal Reports,花了点时间研究了下它,才发现其实不然. 历史: 最开始的开发公司名为Crystal Se ...
- 快速排序算法(Quicksort)
快速排序算法是对集合中元素进行排序最通用的算法,俗称快排,其算法的时间复杂度为O(nlgn),空间复杂度为O(1). 我们举例来对其算法思路进行理解,譬如数组 A = { 4, 8, 1, 2, 9, ...
- php 超时 解决办法 (Maximum execution time of 30 seconds exceeded)这个问题?
1. 修改是APACHE设置,在PHP.INI中找到一个参数: max_execution_time 将后面的值调大,然后重新启动APACHE服务(centos: service httpd rest ...
- 构建Java并发模型框架
Java的多线程特性为构建高性能的应用提供了极大的方便,但是也带来了不少的麻烦.线程间同步.数据一致性等烦琐的问题需要细心的考虑,一不小心就会出现一些微妙的,难以调试的错误.另外,应用逻辑和线程逻辑纠 ...