对于下载文件这个常见场景，相信大家都遇到过，不管是从浏览器下载软件还是在某某后台导出文件之类，但是一般我们使用浏览器下载软件都是可以看到下载进度提示的，而我们在某某后台导出文件之类却很少能看到下载进度，点击导出按钮，如果导出文件耗时太久而页面又没有变化，可能让用户重新点击导出或者切换页面，浪费用户点击，总之就是导出体验不够友好。
所以这里给大家介绍一种Ajax下载文件并添加进度条的方法
1. Java后端代码
代码语言：javascript复制@RequestMapping("/export")
public void list(JobLog jobLog, HttpServletRequest request, HttpServletResponse response) throws IOException {
ParameterUtil.set(jobLog);
jobLogService.export(jobLog, response, request);
}
...
@Override
public void export(JobLog jobLog, HttpServletResponse response, HttpServletRequest request) throws IOException {
ExportParams exportParams = new ExportParams();
exportParams.setStyle(IExcelExportStylerImpl.class);
exportParams.setColor(HSSFColor.HSSFColorPredefined.GREEN.getIndex());
try (Workbook workbook = ExcelExportUtil.exportBigExcel(exportParams, JobLog.class, this, jobLog);
// 划重点-使用bos获取excl文件大小
ByteArrayOutputStream bos = new ByteArrayOutputStream();
OutputStream os = response.getOutputStream()) {
workbook.write(bos);
ServletUtil.setExportResponse(request, response, "任务日志列表.xlsx", bos.size());
// 保存数据
bos.writeTo(os);
}
}
...
/**
* 设置文件导出响应流
*
* @param response 响应对象
* @param request 请求对象
* @param size 文件大小
* @throws UnsupportedEncodingException 不支持字符编码异常
*/
public static void setExportResponse(HttpServletRequest request, HttpServletResponse response, String fileName, Integer size) throws UnsupportedEncodingException {
response.setCharacterEncoding(Constants.UTF_ENCODING);
response.setHeader("Content-Length", HttpUtil.safeHttpHeader(size ""));
response.setHeader("Content-Disposition", HttpUtil.safeHttpHeader("attachment;filename=" FileUtils.setFileDownloadHeader(request, fileName)));
response.setContentType("application/octet-stream");
}上述代码核心逻辑在 setExportResponse() 方法，给响应流添加内容长度即文件大小
2. 前端代码
代码语言：javascript复制/**
* 通用导出方法，此处依赖leyer，bootstrap3
*/
function exportData(exportUrl, formId, filename) {
var req = new XMLHttpRequest();
req.open("post", exportUrl);
req.responseType = "blob";
//监听进度事件
req.addEventListener("progress", function (evt) {
// 是否有长度信息
if (evt.lengthComputable) {
// 已加载字节数
var loaded = evt.loaded;
// 总字节数
var total = evt.total;
var percentComplete = loaded / total;
$("#process").css({'width': percentComplete * 100 "%"})
$("#processText").text(percentComplete * 100 "%")
console.log(percentComplete);
if (percentComplete >= 1) {
setTimeout(() => {
layer.closeAll();
}, 2000);
}
}
}, false);
layer.closeAll();
layer.open({
type: 1,
title: '正在下载，请稍后...',
icon: 16,
shade: 0.01,
time: false,
area: ['240px', '75px'],
content: `<div class="progress progress-striped active" style="position: relative;top: 15%;width: 95%;display: inline-flex;margin: 0 0 0 5px;">
<div style="width: 0%" id="process" class="progress-bar progress-bar-success">
<span id="processText" style="color: #262c2a">0%</span>
</div>
</div>` //这里content是一个普通的String
});
req.onreadystatechange = function () {
if (req.readyState === 4) {
if (req.status === 200) {
if (typeof window.chrome !== 'undefined') {
// Chrome version
var link = document.createElement('a');
link.href = window.URL.createObjectURL(req.response);
link.download = filename;
link.click();
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE version
var blob = new Blob([req.response], {type: 'application/force-download'});
window.navigator.msSaveBlob(blob, filename);
} else {
// Firefox version
var file = new File([req.response], filename, {type: 'application/force-download'});
window.open(URL.createObjectURL(file));
}
} else {
layer.close(index);
layer.alert('下载失败！');
}
}
};
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send($('#' formId '').serialize());
}上述代码核心逻辑是通过原生Ajax请求下载文件，再通过 req.addEventListener("progress", function (evt) {...} 方法，监听 progress 事件，计算下载进度。需要注意的是如果后端没有返回内容长度（ Content-Length ），那么下载进度条是无效的
实现效果如下：
QQ图片20221219194236.png
3. 总结
觉得有用的话不妨点赞、转发、评论，上述示例代码来自 https://github.com/wayn111/crowd-admin 项目
引用链接
[1]: https://juejin.cn/post/7167294154827890702
