摘要:PlayFramework + JQuery : Ajax 非同步檔案下載
我這裡遇到的問題，是由於報表處理時間會比較久，且比較大，需要做成檔案，再讓使用者到實體檔案位置下載
在Server端，則將資料寫成檔案，並存放在一個資料夾底下，
回傳report_url
JavaScript 呼叫報表處理後，並非同步等待，等到報表處理完之後，得到json的report_url，並使用report_url 儲存檔案
我使用Server端程式碼playframework，使用他回傳json，在非同步過程中，使用loading圖做等待效果
程式碼如下：
HTML端：
<script>
var Download = {
click : function(node) {
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
return node.dispatchEvent(ev);
},
link : function(url, name){
var a = document.createElement('a');
a.download = name || self.location.pathname.slice(self.location.pathname.lastIndexOf('/')+1);
a.href = url || self.location.href;
return a;
}
};
Download.save = function(url, name){
this.click(
this.link( url , name)
);
};
var get_report_file = function() {
$("#loading").css("display","");
var params = {
};
$.ajax({
url: 'report_download',
dataType:"json",
async: true,
data: params,
success: function(data){
alert(data);
Download.save(data.report_url,data.report_name);
$("#loading").css("display","none");
},
error: function(xhr, ajaxOptions, thrownError){
alert('Report Service 發生錯誤 ');
alert(xhr.responseText);
alert(thrownError);
$("#loading").css("display","none");
}
});
}
</script>
<form id="form1" name="form1" method="POST" >
<button onclick="get_report_file();return false;">連線存取</button>
<div id="loading" style="display:none" >
<span id="loading_img"><img src="@{'public/images/loading.gif'}"></span>
</div>
</form>
JAVA端，在同一頁的Controller加入
public static void report_download()
{
JsonObject object = new JsonObject();
object.addProperty("error_code","200");
object.addProperty("error_msg","OK");
object.addProperty("report_url","<file_url>");
object.addProperty("report_name","報表名稱.csv");
Gson gson = new Gson();
String json= gson.toJson(object);
renderJSON(json);
}