背景

开发项目中导出功能,因为数据量有点大,所以导出可能需要时间有点长,所以想用ajax异步请求。

存在问题

利用传统的js和jquery提供的ajax相关获取响应的方式是无法实现excel文件下载的。

js的XMLHttpRequest对象提供了responseText和responseXML两个属性,获取的是html和xml文件格式,没有提供二进制流获取的方式。参考

jquery提供了$.ajax()方法中返回的响应结果类型包括xml,html,script,json,jsonp,text,其中也没有二进制流文件格式。参考

解决办法

原生开发

当原生开发的时候,就要依靠操作XMLHttpRequest对象来获取响应的二进制流。经过百度我发现虽然这个对象没有提供直接获取流的属性,但是它的文档中responseType是可以返回一个Blob对象的。而Blob对象就是一个二进制数据的对象,只要我们获取到这个对象,就可以通过浏览器获取到需要的excel文件。

代码:

$('.exportBtn').bind("click", function () {
var method = 'post';//请求方法
var url = 'http://localhost.....';//请求url
var xhr = new XMLHttpRequest();//定义一个XMLHttpRequest对象
xhr.open(method, url, true);
xhr.responseType = 'blob';//设置ajax的响应类型为blob
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
xhr.onload = function ()//当请求完成,响应就绪进入
{
if (this.status == 200)//当响应状态码为200时进入
{
var blob = this.response;//获取响应返回的blob对象
//这一段用来判断是否是IE浏览器,因为下面有些代码不支持IE
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, "NPI_PROJECT.xlsx");
return;
}
var a = document.createElement('a');//在dom树上创建一个a标签
var url = window.URL.createObjectURL(blob);//我的理解是生成一个相对于浏览器的虚拟url,用于指向传入的blob对象,让浏览器可以通过这个url找到这个blob对象
a.href = url;//将url赋值给a标签的href属性
a.download = 'NPI_PROJECT.xlsx';//设置设置下载文件的名称
a.click();//主动触发a标签点击事件
}
};
xhr.send(JSON.stringify({
name: '',
status: ''
}));//附带参数发送请求
});

  jquery插件开发 -->jquery.fileDownload

  用这个插件是最简单的

  

$('.exportBtn').bind("click", function () {
var httpMethod = 'post';
var url = "http://localhost.....";
var params = {
name: '',
status: ''
};
$.fileDownload(url, {
httpMethod: httpMethod,
// 因为这个插件貌似只支持URL参数,所以要用jquery param将js对象转成URL参数
data: $.param(params),
prepareCallback: function (url) {
console.log("正在导出...");
},
//要想成功回调失败和成功方法,要在响应首部加 response.setHeader("Set-Cookie", "fileDownload=true; path=/");
successCallback: function (url) {
console.log("导出成功");
},
failCallback: function (html, url) {
console.log("导出失败");
}
})

tips:

1.如果成功失败回调函数没有生效,一定要确认响应首部是否添加成功。因为我遇到一个情况,我先写响应流,然后添加首部发现没有添加成功。

2.fileDownload的data参数貌似只支持URL格式参数(如name=1&age=12),我尝试传json和js对象都没有成功。而且控制器不要使用@Requestbody接受参数,因为这个注解只接受请求体中的JSON格式参数。

参考

jquery.param文档

jquery.fileDownload问答

ajax发送请求下载字节流形式的excel文件的更多相关文章

  1. 用ajax下载字节流形式的excel文件

    原因:ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,ajax没法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件. 解决方 ...

  2. ajax发送请求跨域 - uri java代理

    问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...

  3. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...

  4. Ajax - 发送请求原理

    1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单 ...

  5. ajax对象。同步与异步及ajax发送请求

    ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了 ...

  6. Django——Ajax发送请求验证用户名是否被注册

    场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...

  7. 【ABAP系列】SAP ABAP下载带密码的Excel文件

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP下载带密码的Ex ...

  8. ajax发送请求

    首先创建XMLHttpRequest对象,利用此对象发送请求 主页面 <!doctype html> <html lang="en"> <head&g ...

  9. 原生Ajax发送请求

    ajax  get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...

随机推荐

  1. ros之发布者和订阅者协同工作

    前面的例子显示了单个发布者/单个订阅者的情况,但是一个节点也可以同时是一个发布者和订阅者,或者拥有多个订阅和发布. 实际上,ROS节点最常做的事情是传递消息,并在消息上进行运算. 例doubler.p ...

  2. 变量引用的错误:UnboundLocalError: local variable 'range' referenced before assignment

    class Battery(): """一次模拟电瓶汽车的简单尝试""" def __init__(self,battery_size = ...

  3. 林大妈的JavaScript进阶知识(二):JS异步行为

    JavaScript 是单线程执行的 JavaScript运行在浏览器中.浏览器是多线程的,但只分配了其中一条给JavaScript,作为它的主线程.对于编码者来说,JavaScript是单线程的.因 ...

  4. 《java多线程编程核心技术》不使用等待通知机制 实现线程间通信的 疑问分析

    不使用等待通知机制 实现线程间通信的 疑问分析 2018年04月03日 17:15:08       ayf 阅读数:33 编辑 <java多线程编程核心技术>一书第三章开头,有如下案例: ...

  5. java中深拷贝浅拷贝简析

    Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那 ...

  6. Spring Bean几种注入方式——setter(常用),构造器,注入内部Bean,注入集合,接口...

    依赖注入分为三种方式: 1.1构造器注入 构造器通过构造方法实现,构造方法有无参数都可以.在大部分情况下我们都是通过类的构造器来创建对象,Spring也可以采用反射机制通过构造器完成注入,这就是构造器 ...

  7. 消息队列MQ集合

    消息队列MQ集合 消息队列简介 kafka简介 Centos7部署zookeeper和Kafka集群 .

  8. 51nod 1002 数塔取值问题 dp

    动态规划 1002 数塔取数问题 1.0 秒 131,072.0 KB 5 分 1级题   一个高度为N的由正整数组成的三角形,从上走到下,求经过的数字和的最大值. 每次只能走到下一层相邻的数上,例如 ...

  9. vue.extend 拓展

    https://www.w3cplus.com/vue/vue-extend.html https://jspang.com/post/vue2-2.html https://blog.csdn.ne ...

  10. .net 微服务实践

    l  前言 本文记录了我的一次.net core 微服务架构实践经验,以及所用到的技术 l  优点 每个服务聚焦于一块业务,无论在开发阶段或是部署阶段都是独立的,更适合被各个小团队开发维护,团队对服务 ...