通常前后端數(shù)據(jù)交互都是用JQuery的ajax函數(shù)抽诉，其返回類型只有xml、text吐绵、json迹淌、html等類型河绽，沒有“流”類型，所以我們無(wú)法使用ajax實(shí)現(xiàn)文件下載唉窃。下面介紹幾種文件下載的思路耙饰。
一、windows.open下載文件
后端返回的是文件流
1.1 前端代碼
var downloadURL = "appraise/download?flightNo=123";
window.open(downloadURL);
1.2 后端代碼
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
// 這里URLEncoder.encode可以防止中文亂碼 當(dāng)然和easyexcel沒有關(guān)系
String fileName = URLEncoder.encode("測(cè)試", "UTF-8");
//通知瀏覽器下載文件而不是打開
response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xls");
//工作薄
HSSFWorkbook workbook = new HSSFWorkbook();
int index = 0;
for(Map.Entry<String, List<EvaluationDo>> entry : evaluationTypeMap.entrySet()){
if(providers.containsKey(entry.getKey())){
AbstractEvaluationProvider evaluationDataProvider = providers.get(entry.getKey());
ExportExcelUtils.exportExcel(workbook,index++,evaluationDataProvider.createSheet(),evaluationDataProvider.createHead(),evaluationDataProvider.createData(entry.getValue()));
}
}
workbook.write(response.getOutputStream());
1.3 優(yōu)點(diǎn)
- 瀏覽器兼容性好
1.4 缺點(diǎn)
- URL長(zhǎng)度受限制
- 拿不到后端處理這個(gè)過(guò)程的時(shí)機(jī)纹份，無(wú)法根據(jù)回調(diào)函數(shù)做交互以及進(jìn)度提示
二苟跪、ajax提交請(qǐng)求，后端返回文件在線地址
后端返回的是文件地址（文件地址可訪問(wèn)）
2.1 前端代碼
$.ajax({
type: "post",
url: "appraise/download",
data: {'flightNo':'123'},
success: function (res) {
if (res.Status) {
// window.open或者a標(biāo)簽下載
var isSupportDownload = 'download' in document.createElement('a');
if (isSupportDownload) {
var $a = $("<a>");
$a.attr({
href: res.url,
download: 'filename'
}).hide().appendTo($("body"))[0].click();
} else {
window.open(res.url)
}
} else {
alert(res.Message);
}
}
})
2.2 后端代碼
return "doc/adscf-1123-221ss-dda.doc";
2.3 優(yōu)點(diǎn)
- 可以獲取文件返回時(shí)機(jī)蔓涧，可以做交互
2.4 缺點(diǎn)
- 線上產(chǎn)生大量的中間臨時(shí)文件件已，可以用設(shè)置時(shí)限來(lái)優(yōu)化或可使用大廠的云存儲(chǔ)，從而減少臨時(shí)文件的產(chǎn)生
三元暴、使用form.submit下載文件
后端返回文件流
3.1 前端代碼
try{
var exportForm = $("<form action='appraise/downLoad' method='post'></form>");
exportForm.append("<input type='hidden' name='flightLeftDate' value='" + flightLeftDate + "'/>");
exportForm.append("<input type='hidden' name='flightRightDate' value='" + flightRightDate + "'/>");
exportForm.append("<input type='hidden' name='evaluationType' value='vectorDataEvaluation'/>");
$(document.body).append(exportForm);
exportForm.submit();
}catch (e) {
alert_prompt(e);
}finally {
exportForm.remove();
}
3.2 后端代碼
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
// 這里URLEncoder.encode可以防止中文亂碼 當(dāng)然和easyexcel沒有關(guān)系
String fileName = URLEncoder.encode("測(cè)試", "UTF-8");
//通知瀏覽器下載文件而不是打開
response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xls");
//工作薄
HSSFWorkbook workbook = new HSSFWorkbook();
int index = 0;
for(Map.Entry<String, List<EvaluationDo>> entry : evaluationTypeMap.entrySet()){
if(providers.containsKey(entry.getKey())){
AbstractEvaluationProvider evaluationDataProvider = providers.get(entry.getKey());
ExportExcelUtils.exportExcel(workbook,index++,evaluationDataProvider.createSheet(),evaluationDataProvider.createHead(),evaluationDataProvider.createData(entry.getValue()));
}
}
workbook.write(response.getOutputStream());
3.3 優(yōu)點(diǎn)
- 兼容性良好篷扩，傳統(tǒng)方式，不會(huì)出現(xiàn)URL長(zhǎng)度限制問(wèn)題
3.4 缺點(diǎn)
- 拿不到后端處理這個(gè)過(guò)程的時(shí)機(jī)茉盏，無(wú)法根據(jù)回調(diào)函數(shù)做交互以及進(jìn)度提示
四鉴未、使用 jquery-download 插件
- jquery-download 下載地址：https://github.com/johnculviner/jquery.fileDownload/blob/master/src/Scripts/jquery.fileDownload.js
- jquery-download CDN地址：https://www.bootcdn.cn/jquery.fileDownload/
4.1 前端代碼
$.fileDownload('appraise/downLoad.jhtml', {
httpMethod: 'post',
data: {'flightLeftDate': flightLeftDate,'flightRightDate':flightRightDate},
prepareCallback: function (url) {
console.log("文件下載中...");
// 數(shù)據(jù)加載動(dòng)畫
$("#loading").modal('show');
},
abortCallback: function (url) {
// 異常終止
alert_prompt("文件下載異常！");
$("#loading").modal('hide');
},
successCallback: function (url) {
alert_prompt("文件下載成功鸠姨！");
$("#loading").modal('hide');
},
failCallback: function (html, url) {
if(html.indexOf('<') >= 0) {
html = $(html).text();
}
var result = JSON.parse(html);
$("#loading").modal('hide');
alert_prompt("文件下載失斖选：" + result.Head.Msg);
}
});
4.2 后端代碼
if(!evaluationTypeMap.isEmpty()){
try{
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
// 這里URLEncoder.encode可以防止中文亂碼 當(dāng)然和easyexcel沒有關(guān)系
String fileName = URLEncoder.encode("測(cè)試", "UTF-8");
response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xls");
response.setHeader("Set-Cookie", "fileDownload=true; path=/");
//工作薄
HSSFWorkbook workbook = new HSSFWorkbook();
int index = 0;
for(Map.Entry<String, List<EvaluationDo>> entry : evaluationTypeMap.entrySet()){
if(providers.containsKey(entry.getKey())){
AbstractEvaluationProvider evaluationDataProvider = providers.get(entry.getKey());
ExportExcelUtils.exportExcel(workbook,index++,evaluationDataProvider.createSheet(),evaluationDataProvider.createHead(),evaluationDataProvider.createData(entry.getValue()));
}
}
workbook.write(response.getOutputStream());
}catch (Exception e){
log.error("efb:評(píng)價(jià)導(dǎo)出---->導(dǎo)出失敗：",e);
// 重置response
response.reset();
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
EfbReturnPO efbReturnPO = new EfbReturnPO();
efbReturnPO.setUnSuccessHead("下載文件失斞惹ā：" + e.getMessage());
response.setHeader("Set-Cookie", "fileDownload=false; path=/");
response.getWriter().println(AOSJson.toJson(efbReturnPO));
}
}else{
log.error("efb:評(píng)價(jià)導(dǎo)出---->導(dǎo)出失斢鸱濉：無(wú)匹配數(shù)據(jù)");
// 重置response
response.reset();
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
EfbReturnPO efbReturnPO = new EfbReturnPO();
efbReturnPO.setUnSuccessHead("無(wú)匹配數(shù)據(jù)！");
response.setHeader("Set-Cookie", "fileDownload=false; path=/");
response.getWriter().println(AOSJson.toJson(efbReturnPO));
}
注意：后端代碼增加了一個(gè)名為"fileDownload"的cookie的返回添瓷；jquery.download.js插件使用該cookie來(lái)判斷是否下載成功梅屉，從而進(jìn)入成功回調(diào)函數(shù)（successCallback）
4.3 優(yōu)點(diǎn)
- 瀏覽器兼容好，此插件做了多種兼容
- window.open(url)打開某個(gè)文件地址
- iframe的框架中鳞贷，設(shè)置src屬性坯汤，通過(guò)iframe進(jìn)行文件的下載，支持文件地址
- 通過(guò)form標(biāo)簽搀愧，設(shè)置action的文件地址惰聂，然后通過(guò)form的提交來(lái)完成文件的下載
- 可以獲取文件返回時(shí)機(jī)，可以做交互
五咱筛、其它方案
- iframe直接向后端提交搓幌，實(shí)現(xiàn)對(duì)文件流進(jìn)行下載
- Html5的Blob對(duì)象實(shí)現(xiàn)對(duì)文件流進(jìn)行下載
- file-saver實(shí)現(xiàn)對(duì)文件流進(jìn)行下載
