ajax文件导出

       前提ajax是没有办法支持文件导出的

ajax 中response支持的返回值有

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

     可以看到是没有文件流方式的,所以是不能用于文件下载使用

这个问题的发现是由于项目中前端代码都是使用ajax的方式来写的,而在写下载的时候没有注意到该问题,就发现了文件下载不下来,最后分析出来是这个问题

    解决方案有两种

           1、直接让前端放弃使用ajax,而使用同步调用后端的方式来写。我们项目最后就是采取这种方案来做的

           2、模拟ajax的方式来做,要注意一点ajax一定是不支持的,所以只是模拟出页面不刷新的情况下载文件而已

    具体方式如下:

      分步实现逻辑:

  1. ajax请求服务器,访问数据库,根据查询到的数据生成一个数据文件,返回前台一个json对象(可放置生成成功标记,文件路径等信息)。
  2. ajax success回调函数部分,根据返回的json对象,调用手写的js下载文件的方法,实现页面无刷新下载文件。

      

   js文件 参考 https://www.cnblogs.com/zj0208/p/5961181.html

写道
// 查询数据,输出到文件,保存到服务器,并实现下载
function exportOilDetection() {
$.ajax({
type : 'POST',
dataType : 'json',
async : false,
url : "${pageContext.request.contextPath}/!ajaxExportOilDetectionInfos.action", // 生成文件,保存在服务器
data : {
ids : ids,
},
success : function(data) {
var result = data["data"];
if (result[0] == "success") {
// result[0] -- 文件生成成功标记
// result[1] -- 路径
// result[2] -- 文件名称
$.download('oilDetectionAction!ajaxDownloadDataExcel.action', 'post', result[1], result[2]); // 下载文件
} else {
alert("数据导出失败!");
}
},
error : function(XMLHttpRequest, textStatus, e) {
console.log("oilDetection.js method exportOilDetection" + e);
}
});
}

     

    

相关推荐