我需要向请求下载文件的用户展示进度条。 我正在使用J2EE应用程序生成文件。 用户将提交表单数据以获取文件。 服务器接收所有提交的数据,进行操作,生成并将PDF文件发送回客户端。
因此,我想在文件到达客户端之前向用户显示进度条。有没有办法做到这一点?
我需要向请求下载文件的用户展示进度条。 我正在使用J2EE应用程序生成文件。 用户将提交表单数据以获取文件。 服务器接收所有提交的数据,进行操作,生成并将PDF文件发送回客户端。
因此,我想在文件到达客户端之前向用户显示进度条。有没有办法做到这一点?
如果我理解得正确,您想要显示一个进度条直到服务器准备好发送文件,而不是显示文件下载的进度。
如果是这样,您正在处理一项棘手的练习。可靠的进度条需要知道您要做什么以及需要多长时间(非常精确)。在您的情况下,有很多不可靠的因素(其中之一,可能是最大的因素,是网络本身)。
因此,大多数开发人员使用某种“无限”动画来显示“工作正在进行中”。
更新
根据您的评论,显示“工作正在进行中”动画的最简单方法如下:
$.ajax({
url: "/myscripts/myserverscript",
type: "POST",
data: {
foo: "bar"
},
dataType: "text",
beforeSend: function(xhr){
// display a progress animation
},
complete: function(xhr, status){
// hide the animation
}
...
});
在单个请求的情况下,您还可以设置全局的ajax事件处理程序来设置显示/隐藏功能(.ajaxStart()
和.ajaxStop()
)。服务器端文件生成进度条:
我们假设服务器需要花费很多秒来生成文件。这个事件由原始请求触发,是一个阻塞操作。当它完成时,文件将被生成并发送回客户端。
同时,您希望通过其他请求(ajax)调用服务器,并获取针对当前正在为特定用户生成的文件的百分比。
这里的关键部分是:
文件下载进度条:
最好将其留给浏览器的本机对话框。
使用XMLHttpRequest,您可以下载文件并显示进度。
showProgressBar();
var xhr = new XMLHttpRequest();
xhr.open("GET", 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Big_%26_Small_Pumkins.JPG', true);
xhr.responseType = "blob";
xhr.onprogress = function (e) {
console.log(e.loaded / e.total * 100);//shows downloaded percentage
setProgressBarPercentage(e.loaded / e.total * 100);
}
xhr.onload = function () {
hideProgressBar();
var urlCreator = window.URL || window.webkitURL;
var url = urlCreator.createObjectURL(this.response);
var link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', 'FILENAME');
link.click();
}
xhr.send();