如何用ajax下载文件
引子
在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式:
借助a标签,
<a href="学习资料.xlsx"></a>
window.location = '学习资料.xlsx'
借助浏览器插件,如flash等(没考证过)
除了第三外,前两种方法有个缺点,就是无法知道下载是否完成,因为浏览器没有给出相关的事件。但是,自从有了Blob,fetch, xhr2这些好用的API之后,ajax下载文件(小文件)就变得可行了,核心原因就在于Blob和ArrayBuffter这些API提供给了浏览器操作二进制文件的能力。接下来就开始我的表演
1. fetch方法
fetch优点有很多,比如基于promise,写起来直观易懂,缺点是IE,包括IE11全部不支持。
使用时要注意一点是,fetch请求时默认不会带上cookie,如果你的api是在登录后才能访问,记得手动设置 credentials选项。下面是下载一个文件的代码:
fetch('学习资料.xlsx', {
method: 'GET',
credentials: "same-origin"// 带上cookie
})
.then(res => res.blob())
.then(blob => {
saveAs(blob) //fileSaver.js中的方法
})
从上面可以看出,调用fetch时会返回一个promise,当promise resolve时,会传出一个Response的实例(res),这个res除了有status
, statusText
,ok
这几个属性用于获取服务器相应的状态值外,还有几个炫酷的方法,正式这几个方法,使浏览器可以请求的数据类型不再局限于文本,他们是:
res.blob() //返回值是一个promise,promise resolve后会拿到一个blob对象
res.json() //返回值是一个promise,promise resolve后会拿到一个json对象,无需再调用JSON.parse
res.text() //返回值是一个promise,promise resolve后会拿到一个字符串
res.formData() //返回值是一个promise,promise resolve后会拿到一个表单数据对象(formData)
所以拿到blob后,接下来就是触发浏览器的下载了,这里调用了一个saveAs函数,它来自FileSaver.js,一个不用请求api也可以触发浏览器下载动作的库,它接受一个blob对象,和一个可选的文件名称参数,就能触发下载动作。
2.xhr2方法
xhr2的兼容性比fetchAPI要好,兼容到IE10,它没有向fetch一样把难用的xhr推翻重做,而是做了一些有用的扩展,比如xhr.responseType
,在发起请求前,通过设置这个属性,可以使浏览器对返回的数据进行处理,就像res的那些有用的方法一样。xhr.responseType可以取下列值:
"arraybuffer",
"blob",
"document",
"json",
"text"
没错,就是和上面的res的那些方法殊途同归。当请求数据返回时,你可以从xhr.response
拿到相应的数据。为什么不是res.responseText
呢?很明显这是xhr1时期的,从这个属性只能拿到字符串,是满足不了我们的需求的。
接下来的事情就跟上面一样了,照例贴一下代码:
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.open('GET', url, true);
xhr.onload = function(){
var res = xhr.response;
if(res){
saveAs(res, filename);
}
}
xhr.send();
到这里,你就可以从容掌握文件下载的状态了。最后再啰嗦一句,xhr.onload也是xhr2增加的事件,有了它,再也不想用xhr.onReadyStateChange了。其他新增的事件还有'onprocess', 'onerror', 'onabort', 'onloadstart','onloadend', 'ontimeout'。(完)
如何用ajax下载文件的更多相关文章
- Ajax 下载文件 文件被损坏
问题表现 Ajax 下载文件成功后,打开提示格式损坏,源代码如下: axios({ method: 'get', url: "/public/工作簿1.xlsx", // 静态资源 ...
- Ajax下载文件(页面无刷新)
说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...
- js之Ajax下载文件
传统上,客户端将依靠浏览器来处理从服务器下载文件.然而,这种方法需要打开一个新的浏览器窗口,iframe或任何其他类型的不友好和黑客行为.为下载请求添加额外的头信息也很困难.更好的解决方案是使用HTM ...
- 怎么用ajax下载文件
可能大家都觉得没有必要用ajax来下载东西,用window.open(url)就可以搞定 但是这有一个问题,就是这就限定了只能用GET方式来请求了: 可能你又会说GET很符合REST的要求呀. 但是如 ...
- jQuery用FormData对象实现文件上传以及如何通过ajax下载文件
之前在Vue的项目里面用到过文件上传,封装好的组件用起来比较顺手,查询Element-UI文档,十八般武器样样都有,一顿操作猛如虎,一看--跑偏了(⊙o⊙)-,我的意思就是用框架实现比较简单,但是如果 ...
- ajax 下载文件
原本现在文件直接通过超链接可以完成下载,但现在要在url中附带几个参数,并且这些参数要是点击事件触发时的最新值,所以这里使用ajax的方式进行下载 然而: 1.使用ajax,ajax的返回值类型是js ...
- 如何用 JavaScript 下载文件
简介 我们知道,下载文件是一个非常常见的需求,但由于浏览器的安全策略的限制,我们通常只能通过一个额外的页面,访问某个文件的 url 来实现下载功能,但是这种用户体验非常不好. 幸好,HTML 5 里面 ...
- ASP.NET MVC Ajax下载文件(使用NPOI向现有的excel模板文件里面添加数据)
View Html.DevExpress().Button(DevExpressButtonHelper.AddButton(ViewBag.Form, "Export", &qu ...
- ajax下载文件
得到所有Post数据: var postData=Request.Form.ToString() 构建JS代码 // Ajax 文件下载jQuery.download = function(url, ...
随机推荐
- AngularJS的$location基本用法和注意事项
一.配置config app.config([ '$locationProvider', function($locationProvider) { $locationProvider.html5Mo ...
- canvas打字效果
运用fillText,写的打字效果. 唯一麻烦的地方是,换行问题, 我是把字符串转化为数组,数组一个单位完成,就换行,继续下一个单位. <!doctype html> <html&g ...
- Ethernet II和802.3
在卷一中:(章节二:数据链路层) 在T C P / I P协议族中,链路层主要有三个目的: (1)为IP模块发送和接收IP数据报: (2 )为ARP模块发送ARP请求和接收ARP应答: (3 )为RA ...
- js基础学习笔记(零七)
indexOf() 方法 返回某个指定的字符串值在字符串中首次出现的位置. 语法: stringObject.indexOf(substring, startpos) 参数说明: 注意:如果要检索的字 ...
- Android多点触控手势基础
处理多点触控手势 多点触控就是同时把一根以上的手指放在屏幕上. 再继续往下以前需要补充一些名词: 触控手势:就是把一根或者几根手指放在屏幕上做各种动作,其中包括保留一根手指的前提下,拿起或者放下其余的 ...
- hihocode 1336 Matrix Sum 【二维树状数组】
题目 两个操作: 1. Add x y value: Add value to the element Axy. (Subscripts starts from 0 2. Sum x1 y1 x2 y ...
- vlookup返回多个结果
http://www.360doc.com/content/12/1021/15/7665211_242782107.shtml =IFERROR(VLOOKUP(D2&ROW(A1),IF( ...
- Android-Java-面向对象与面向过程举例
例子一: 面向过程 在生活中的体现: 李四去饭店吃饭,进入风华高档餐饮店后,首先不理服务员,然后冲进厨房,推开厨师,自己开煤气,自己切菜,自己炒菜,自己调料,炒好后自己端出来,然后吃,吃完后 买单 面 ...
- Crontab有关
AIX下面 0,2,4,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,58 * * * * /usr/s ...
- HTML超级链接详细讲解
超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转.超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习. — 注意 ...