一、场景介绍

按照模版导入excel文件，把符合规则的数据更新后，把异常数据导出excel，并记录导出原因。导入导出需要一键操作！！！

二、设计过程

用ajax上传文件，ajax上传成功后，在ajax的success中嵌套ajax实现文件的下载。

前端代码如下：

<div id="excelUpForm" class="jd_hide"><form id="excelUpBD"  method="post" enctype="multipart/form-data"><div><input name="file" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/></div></form>
</div><script>function () {var formData = new FormData($('#excelUpBD')[0]);if($('#excelUpBD')[0].elements[0].value.length == 0 || $('#excelUpBD')[0].elements[0].value == ""){alert("请选择文件");return;}$.ajax({url:"/rest/test/excelUpload",data: formData,type:"POST",dataType:'json',cache: false,processData: false,contentType: false,async : false}).done(function (result) {if (result.sucess){confirm(result.msg);location.reload();$.ajax({url:"/rest/test/export",data: JSON.stringify(result.data),type:"POST",dataType:'json',cache: false,processData: false,contentType: 'application/json;charset=UTF-8',async : false}).done(function () {})}else {confirm(result.msg);location.reload();}})}
</script>

后台代码操作结果正常，但是导出的excel并没有在页面显示，这是为什么呢？？？

因为excel的导出流是二进制流，而ajax的输出为dataType类型如下：

类型	解释
”xml”	返回 XML 文档，可用 jQuery 处理
”html”	返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行
”script”	返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
”json”	返回 JSON 数据
”jsonp”	JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
”text”	返回纯文本字符串

dataType的输出类型中没有二进制流，所以导出excel输出的二进制流无法转出为字符串，从而excel导出无响应。

那么，证明了一点：ajax不可以导出或下载文件。

在一键导入excel并导出excel的文件很大的时候，怎样解决这个问题呢？

显然用ajax导入文件，用ajax返回要导出的大量数据，这样导出数据的传递是很方便的，文件的导出怎样实现？我们可以用ajax的底层代码实现,即用XMLHttpRequest，XMLHttpRequest可以实现ajax的功能，有可以设置返回值得类型

responseType = 'blob'

设置返回值为blob：二进制大对象类型，从而实现ajax导出文件的功能。代码如下：

<div id="excelUpForm" class="jd_hide"><form id="excelUpBD"  method="post" enctype="multipart/form-data"><div><input name="file" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/></div></form>
</div><script>function () {var formData = new FormData($('#excelUpBD')[0]);if($('#excelUpBD')[0].elements[0].value.length == 0 || $('#excelUpBD')[0].elements[0].value == ""){alert("请选择文件");return;}$.ajax({url:"/rest/test/excelUpload",data: formData,type:"POST",dataType:'json',cache: false,processData: false,contentType: false,async : false}).done(function (result) {if (result.sucess){confirm(result.msg);location.reload();var xhr = new XMLHttpRequest();xhr.open('post', '/rest/test/export', true);xhr.responseType = 'blob';xhr.setRequestHeader('Content-Type','application/json;charset=utf-8');xhr.send(JSON.stringify(result.data));xhr.onload = function () {if (this.status == 200) {var blob = this.response;//文件后缀名var d=new Date(),str='';str +=d.getFullYear()+'年'; //获取当前年份str +=d.getMonth()+1+'月'; //获取当前月份（0——11）str +=d.getDate()+'日';str +=d.getHours()+'时';str +=d.getMinutes()+'分';str +=d.getSeconds()+'秒';transferDownload(blob,"test_"+str+".xls");}}function transferDownload(blob, filename) {// 创建隐藏的可下载链接var yLink = document.createElement('a');yLink.download = filename;yLink.style.display = 'none';// 字符内容转变成blob地址yLink.href = URL.createObjectURL(blob);// 触发点击document.body.appendChild(yLink);yLink.click();// 然后移除document.body.removeChild(yLink);}}else {confirm(result.msg);location.reload();}})}
</script>

perfect!!问题解决了！！！excel正常导出。

三、借助第三方平台来下载文件

在上述解决办法之外，还有一种解决思路，是在文件上传成功后，把过滤出来的数据转化为excel的HSSFWorkbook，再转化为

InputStream、再转化为File文件上传文件到某个平台A上，返回平台A上文件存储的链接，直接用链接打开。这样实现文件的上传在本地，文件的下载在第三方平台上，不会出现ajax返回文件流格式的不匹配。实现如下：

<div id="excelUpForm" class="jd_hide"><form id="excelUpBD"  method="post" enctype="multipart/form-data"><div><input name="file" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/></div></form>
</div><script>function () {var formData = new FormData($('#excelUpBD')[0]);if($('#excelUpBD')[0].elements[0].value.length == 0 || $('#excelUpBD')[0].elements[0].value == ""){alert("请选择文件");return;}$.ajax({url:"/rest/test/excelUpload",data: formData,type:"POST",dataType:'json',cache: false,processData: false,contentType: false,async : false}).done(function (result) {if (result.sucess){layer.alert(result.msg);$("#excelUpForm").dialog("close")location.reload();$.ajax({url:"/rest/test/export",data: JSON.stringify(result.data),type:"POST",dataType:'json',cache: false,processData: false,contentType: 'application/json;charset=UTF-8',async : false}).done(function (resultSe) {if (resultSe.sucess) {location.href=resultSe.data;}else{layer.alert(resultSe.msg);}})}else {layer.alert(result.msg);$("#excelUpForm").dialog("close");}})}
</script>

四、不稳定性解决

在上述二、三中的实现方式出现了正确的导出结果，但是出现导出结果不稳定的问题，后台没有任何问题，前端的导出excel页面有时有反应，有时候没有反应，why?

在ajax中，请求成功后先location.reload();后进行excel文件的导出，这样会出现一个问题，当页面刷新的快，excel文件导出的请求操作后台返回却发现前端页面已经刷新，从而不能接收excel导出的返回值，最终结论就是：excel是否能导出取决于location.reload();刷新的速度。解决办法：在ajax中不进行页面的刷新或者是把刷新放在最后一步，刷新操作不能放在ajax的中间步骤，否则会出现后续步骤的返回值无法接收。

ajax嵌套ajax下载excel文件之问题解决相关推荐

php通过ajax下载文件,PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...
PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...
php通过ajax下载文件,通过Ajax如何请求下载Execl文件
本篇文章给大家分享的是关于通过Ajax如何请求下载Execl文件,内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家. 通过Ajax请求下载Execl 的问题,掉进一个坑里半个多小时,特此来记录 ...
前端下载excel文件功能的三种方法
1 从后端接收json数据,前端处理生成excel下载 JsonExportExcel的github地址:https://github.com/cuikangjie/JsonExportExcel 这 ...
react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
java文件流下载excel_React获取Java后台文件流下载Excel文件
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
Java面试poi中excel版本大小_java 中 poi解析Excel文件版本问题解决办法
java 中 poi解析Excel文件版本问题解决办法发布时间:2020-10-02 03:46:15 来源:脚本之家阅读:91 作者:程诺 poi解析Excel文件版本问题解决办法 poi解析E ...
IE中点击链接下载EXCEL文件直接以乱码方式打开解决
我需要在页面上通过javascript控制,点击一个链接下载excel文件模板,总觉得方法都写对了,可每次点击都是新开一个窗口,显示的全是乱码.几日以来一直被这个问题困扰,今天无意中得知这个方法,试了 ...
springboot访问下载/resource/static下的静态资源；下载excel文件损坏,打不开
放文件直接把文件放到resource下的static文件夹中看编译结果启动之后看看是否被编译了访问,下载然后在浏览器输入下面地址就能自动下载文件了 http://localhost:8002 ...

ajax嵌套ajax下载excel文件之问题解决

一、场景介绍

二、设计过程

三、借助第三方平台来下载文件

四、不稳定性解决

ajax嵌套ajax下载excel文件之问题解决相关推荐

最新文章

热门文章